协慌网

我正在建立一个分页系统（类似于 Facebook），当用户滚动到底部时会加载内容。我想最好的方法是找到用户何时位于页面底部，并运行 ajax 查询以加载更多帖子。

唯一的问题是我不知道如何使用 jQuery 检查用户是否已滚动到页面底部。有任何想法吗？

我需要找到一种方法来检查用户何时使用 jQuery 滚动到页面底部。

在window上使用.scroll()事件，如下所示：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

您可以在此处进行测试，这将使窗口顶部滚动，因此将其向下滚动多少，添加可见窗口的高度，并检查其是否等于整个内容（ document ）的高度。如果您想检查用户是否在底部附近，它看起来应该像这样：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

您可以在此处测试该版本，只需将100调整为要触发的底部像素即可。

我不确定为什么还没有发布，但是根据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在浏览器中具有广泛的支持，从更精确的说，即从 8 开始，而每个人都支持clientHeight和scrollTop甚至是 6。这应该是跨浏览器安全的。

尼克 · 克雷弗（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!");
       }
   });