检查用户是否滚动到底部

我正在制作一个分页系统（有点像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到要触发从底部的任何像素。

---

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!");
       }
   });

---

我不完全确定为什么这还没有发布，但根据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都受到每个人的支持。 即使ie 6.这应该是跨浏览器的安全。

链接地址: http://www.djcxy.com/p/14603.html

上一篇: Check if a user has scrolled to the bottom

下一篇: How to tell if a DOM element is visible in the current viewport?