我正在制作一个分页系统(有点像Facebook)，当用户滚动到底部时，内容就会加载。我认为最好的方法是找到用户在页面底部的时间，然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery，所以请随意提供使用它的答案。
当前回答
而不是监听滚动事件，使用交集观察者是检查最后一个元素是否在视口可见的最便宜的一个(这意味着用户被滚动到底部)。它也支持IE7的polyfill。
var observer = new IntersectionObserver(function(entries){ if(entries[0].isIntersecting === true) console.log("Scrolled to the bottom"); else console.log("Not on the bottom"); }, { root:document.querySelector('#scrollContainer'), threshold:1 // Trigger only when whole element was visible }); observer.observe(document.querySelector('#scrollContainer').lastElementChild); #scrollContainer{ height: 100px; overflow: hidden scroll; } <div id="scrollContainer"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> <div>Item 7</div> <div>Item 8</div> <div>Item 9</div> <div>Item 10</div> </div>
其他回答
下面是一个使用es6和debounce的JavaScript解决方案:
document.addEventListener('scroll', debounce(() => {
if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
// Do something
}
}, 500))
function debounce(e,t=300){let u;return(...i)=>{clearTimeout(u),u=setTimeout(()=>{e.apply(this,i)},t)}}
演示:https://jsbin.com/jicikaruta/1/edit?js,输出
引用:
scrollHeight pageYOffset innerHeight 防反跳
这给出了准确的结果，当检查一个可滚动的元素(即不是窗口):
// `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!');
}
});
这是我的意见，因为公认的答案对我不起作用。
var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;
Nick Craver的回答很好，避免了$(document).height()的值因浏览器而异的问题。
为了让它在所有浏览器上都能工作，使用James Padolsey的这个函数:
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
代替$(document).height()，这样最终的代码是:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("bottom!");
}
});
