我正在制作一个分页系统(有点像Facebook)，当用户滚动到底部时，内容就会加载。我认为最好的方法是找到用户在页面底部的时间，然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery，所以请随意提供使用它的答案。
当前回答
下面是一个使用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 防反跳
其他回答
(2021) 这里的很多答案都涉及到一个元素的引用，但如果你只关心整个页面，只需使用:
function isBottom() {
const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
return distanceFromBottom < 20; // adjust the number 20 yourself
}
var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
它计算滚动条到元素底部的距离。 等于0，如果滚动条已经到达底部。
让我展示不使用JQuery的方法。简单的JS函数:
function isVisible(elem) {
var coords = elem.getBoundingClientRect();
var topVisible = coords.top > 0 && coords.top < 0;
var bottomVisible = coords.bottom < shift && coords.bottom > 0;
return topVisible || bottomVisible;
}
简短的例子如何使用它:
var img = document.getElementById("pic1");
if (isVisible(img)) { img.style.opacity = "1.00"; }
如果你调用$(window).height() Chrome会给出页面的全部高度
相反，使用window。innerHeight来检索窗口的高度。 必要的检查应包括:
if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
console.log("reached bottom!");
}
如果滚动到底部，请尝试匹配条件
if ($(this)[0].scrollHeight - $(this).scrollTop() ==
$(this).outerHeight()) {
//code for your custom logic
}
