我正在制作一个分页系统(有点像Facebook)，当用户滚动到底部时，内容就会加载。我认为最好的方法是找到用户在页面底部的时间，然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否已经滚动到页面的底部。什么好主意吗?
我使用jQuery，所以请随意提供使用它的答案。
当前回答
许多其他解决方案不适合我，因为在滚动到底部我的div触发警报2次，当向上移动时，它也会触发到几个像素，所以解决方案是:
$('#your-div').on('resize scroll', function()
{
if ($(this).scrollTop() +
$(this).innerHeight() >=
$(this)[0].scrollHeight + 10) {
alert('reached bottom!');
}
});
其他回答
这是我的观点:
$('#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');
}
});
Safari可以滚动到导致应用程序错误的页面底部。用>=代替===来解决这个问题。
container.scrollTop >= container.scrollHeight - container.clientHeight
您可以尝试以下代码，
$("#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');
}
});
让我展示不使用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.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log("bottom");
}
};
你可以执行footerHeight - document.body.offsetHeight来查看你是否接近页脚或到达页脚
