我正在制作一个分页系统(有点像Facebook)，当用户滚动到底部时，内容就会加载。我认为最好的方法是找到用户在页面底部的时间，然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery，所以请随意提供使用它的答案。
当前回答
这给出了准确的结果，当检查一个可滚动的元素(即不是窗口):
// `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
}
其他回答
Nick Craver的回答需要稍作修改，以适应iOS 6 Safari Mobile，应该是:
$(window).scroll(function() {
if($(window).scrollTop() + window.innerHeight == $(document).height()) {
alert("bottom!");
}
});
将$(window).height()更改为window。innerHeight应该这样做，因为当地址栏被隐藏时，一个额外的60px被添加到窗口的高度，但使用$(window).height()不会反映这个变化，而使用window。innerHeight。
注:窗口。innerHeight属性还包括水平滚动条的高度(如果它被渲染)，不像$(window).height()不包括水平滚动条的高度。这在Mobile Safari中不是问题，但在其他浏览器或未来版本的Mobile Safari中可能会导致意想不到的行为。将==更改为>=可以修复大多数常见用例的这个问题。
阅读更多关于窗户的内容。这里的innerHeight属性
var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
它计算滚动条到元素底部的距离。 等于0，如果滚动条已经到达底部。
这给出了准确的结果，当检查一个可滚动的元素(即不是窗口):
// `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
}
许多其他解决方案不适合我，因为在滚动到底部我的div触发警报2次，当向上移动时，它也会触发到几个像素，所以解决方案是:
$('#your-div').on('resize scroll', function()
{
if ($(this).scrollTop() +
$(this).innerHeight() >=
$(this)[0].scrollHeight + 10) {
alert('reached bottom!');
}
});
我已经用纯JS做了这个非常简单的方法。
function onScroll() {
if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight - 50) {
Console.log('Reached bottom')
}
}
window.addEventListener("scroll", onScroll);
