我正在制作一个分页系统(有点像Facebook)，当用户滚动到底部时，内容就会加载。我认为最好的方法是找到用户在页面底部的时间，然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery，所以请随意提供使用它的答案。
当前回答
许多其他解决方案不适合我，因为在滚动到底部我的div触发警报2次，当向上移动时，它也会触发到几个像素，所以解决方案是:
$('#your-div').on('resize scroll', function()
{
if ($(this).scrollTop() +
$(this).innerHeight() >=
$(this)[0].scrollHeight + 10) {
alert('reached bottom!');
}
});
其他回答
var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
它计算滚动条到元素底部的距离。 等于0，如果滚动条已经到达底部。
尼克回答它的好，但你会有函数，它在滚动时重复自己或将不会工作，如果用户有窗口放大。我想到了一个简单的解决方法只用数学。绕第一个高度，就像假设的那样。
if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
loadPagination();
$(".go-up").css("display","block").show("slow");
}
这给出了准确的结果，当检查一个可滚动的元素(即不是窗口):
// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
// Element scrolled to bottom
offsetHeight应该给出元素的实际可见高度(包括填充、边距和滚动条)，而scrollHeight是元素的整个高度，包括不可见(溢出)区域。
jQuery的.outerHeight()应该给出与JS的.offsetHeight——类似的结果 offsetHeight的MDN文档不清楚它的跨浏览器支持。为了涵盖更多选项，这是更完整的:
var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
// scrolled to bottom
}
我在纯js中的解决方案:
let el=document.getElementById（'el'）; el.addEventListener（'scroll'， function（e） { if （this.scrollHeight - this.scrollTop - this.clientHeight<=0） { 警报（“底部”）; } }); #el{ 宽度：400px; 高度：100px; 溢出-y：滚动; } <div id=“el”> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> </div>
您可以尝试以下代码，
$("#dashboard-scroll").scroll(function(){
var ele = document.getElementById('dashboard-scroll');
if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
console.log('at the bottom of the scroll');
}
});
