检查用户是否已滚动到底部
我正在制作一个分页系统(有点像Facebook)，当用户滚动到底部时，内容就会加载。我想最好的方法是找出用户何时在页面底部，然后运行Ajax查询来加载更多的帖子。
唯一的问题是我不知道如何检查用户是否滚动到了页面底部。有什么想法吗？
我正在使用jQuery，所以请随时提供使用它的答案。
回答 32
Stack Overflow用户
发布于 2010-10-10 06:34:02
在window上使用.scroll()事件，如下所示：
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});You can test it here，它获取窗口的顶部滚动，即它向下滚动的程度，添加可见窗口的高度，并检查该高度是否等于整体内容的高度(document)。如果你想检查用户是否接近底部，它看起来就像这样：
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});You can test that version here，只需将100调整为从底部开始要触发的任何像素即可。
Stack Overflow用户
发布于 2016-01-01 02:13:35
我不确定为什么这篇文章还没有发布，但根据the documentation from MDN的说法，最简单的方法是使用原生javascript属性：
element.scrollHeight - element.scrollTop === element.clientHeight当你在任何可滚动元素的底部时，返回true。所以只需使用javascript：
element.addEventListener('scroll', function(event)
{
var element = event.target;
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
console.log('scrolled');
}
});scrollHeight在浏览器中有广泛的支持，更准确地说，从ie8开始，而clientHeight和scrollTop都受到所有人的支持。甚至是ie6。这应该是跨浏览器安全的。
Stack Overflow用户
发布于 2012-05-29 16:42:42
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!");
}
});https://stackoverflow.com/questions/3898130
复制相似问题
腾讯云开发者
