我正在制作一个分页系统(有点像Facebook)，当用户滚动到底部时，内容就会加载。我认为最好的方法是找到用户在页面底部的时间，然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery，所以请随意提供使用它的答案。
当前回答
显然，对我有用的是“身体”，而不是像这样的“窗口”:
$('body').scroll(function() {
if($('body').scrollTop() + $('body').height() == $(document).height()) {
//alert at buttom
}
});
为了实现跨浏览器兼容性:
function getheight(){
var doc = document;
return Math.max(
doc.body.scrollHeight, doc.documentElement.scrollHeight,
doc.body.offsetHeight, doc.documentElement.offsetHeight,
doc.body.clientHeight, doc.documentElement.clientHeight
);
}
然后调用函数getheight()而不是$(document).height()
$('body').scroll(function() {
if($('body').scrollTop() + $('body').height() == getheight() ) {
//alert at bottom
}
});
接近底部使用:
$('body').scroll(function() {
if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
//alert near bottom
}
});
其他回答
这里有一个相当简单的方法
const didScrollToBottom =榆树。滚动顶部+榆树。clientHeight == elm.scrollHeight
例子
elm.onscroll = function() {
if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
// User has scrolled to the bottom of the element
}
}
其中elm是从i.e. document.getElementById中检索的元素。
var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
它计算滚动条到元素底部的距离。 等于0，如果滚动条已经到达底部。
如果你调用$(window).height() Chrome会给出页面的全部高度
相反，使用window。innerHeight来检索窗口的高度。 必要的检查应包括:
if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
console.log("reached bottom!");
}
尼克回答它的好，但你会有函数，它在滚动时重复自己或将不会工作，如果用户有窗口放大。我想到了一个简单的解决方法只用数学。绕第一个高度，就像假设的那样。
if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
loadPagination();
$(".go-up").css("display","block").show("slow");
}
为了不让尼克的回答反复出现
ScrollActivate();
function ScrollActivate() {
$(window).on("scroll", function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).off("scroll");
alert("near bottom!");
}
});
}
