检查用户是否已滚动到底部。

Question

检查用户是否已滚动到底部。我正在制作一个分页系统(有点像Facebook)，当用户滚动到底部时，内容会加载。我认为最好的方法是找出用户何时在页面底部，并运行Ajax查询来加载更多的帖子。唯一的问题是，我不知道如何检查用户是否已经使用jQuery滚动到页面底部。有什么想法吗？我需要找到一种方法来检查用户何时使用jQuery滚动到页面底部。

Answer 1

使用.scroll()事件window，就像这样：

$(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任何你想要触发的像素。

Answer 2

尼克·克雷弗的答案很好，不用担心$(document).height()不同的浏览器。

若要使其在所有浏览器上运行，请从詹姆斯·帕多尔西:

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

Answer 3

我不太清楚为什么这个还没有发布，但是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在浏览器中有广泛的支持，从ie 8到更精确，同时clientHeight和scrollTop都得到了大家的支持。甚至六号。这应该是跨浏览器安全的。