我正在制作一个分页系统(有点像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>
其他回答
var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
它计算滚动条到元素底部的距离。 等于0，如果滚动条已经到达底部。
这里有一个相当简单的方法
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中检索的元素。
这是我的观点:
$('#container_element').scroll( function(){
console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height()) +' _ '+ $(this)[0].scrollHeight );
if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
console.log('bottom found');
}
});
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!");
}
});
下面是一个使用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 防反跳
