检查用户是否滚动到底部（不仅仅是窗口，而是任何元素）[重复]

在 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 调整为您想要触发的底部像素。

---

我不确定为什么还没有发布，但根据 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 在浏览器中得到了广泛的支持，更准确地说是 ie 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!");
       }
   });

---

除了 Nick Craver 的出色接受答案之外，您可以限制滚动事件，使其不会如此频繁地触发，从而提高浏览器性能：

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

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

    }, _throttleDelay);
}

---

Nick Craver 的答案需要稍作修改才能在 iOS 6 Safari Mobile 上运行，并且应该是：

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

应该将 $(window).height() 更改为 window.innerHeight，因为当地址栏位于hidden 窗口高度增加了 60 像素，但使用 $(window).height()不反映了这种变化，而使用 window.innerHeight 可以。

注意：window.innerHeight 属性还包括水平滚动条的高度（如果已呈现），而 $(window).height() 不包括水平滚动条的高度。这在 Mobile Safari 中不是问题，但可能会在其他浏览器或 Mobile Safari 的未来版本中导致意外行为。对于最常见的用例，将 == 更改为 >= 可以解决此问题。

详细了解 window.innerHeight 属性 here

---

这是一个相当简单的方法

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

例子

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

其中elm 是从即document.getElementById 检索的元素。

---

请检查this answer

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

您可以执行 footerHeight - document.body.offsetHeight 以查看您是否在页脚附近或到达页脚

---

这是一段可以帮助您调试代码的代码，我测试了上面的答案，发现它们有问题。我在 Chrome、IE、Firefox、iPad(Safari) 上测试了以下内容。我没有安装任何其他测试...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

可能有一个更简单的解决方案，但我停在它工作的地方

如果您仍然遇到某些流氓浏览器的问题，这里有一些代码可以帮助您调试：

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

我希望这可以节省一些时间。

---

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

它计算滚动条到元素底部的距离。等于 0，如果滚动条已到达底部。

---

这是我的两分钱：

$('#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');
        }
    });

---

这是一个使用 ES 6 和 debounce 的普通 JavaScript 解决方案：

document.addEventListener('scroll', debounce(() => {
  if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
    // Do something
  }
}, 500))

function debounce(e,t=300){let u;return(...i)=>{clearTimeout(u),u=setTimeout(()=>{e.apply(this,i)},t)}}

演示： https://jsbin.com/jicikaruta/1/edit?js,output

参考：

滚动高度

pageYOffset

内部高度

去抖

---

我在纯js中的解决方案：

让 el=document.getElementById('el'); el.addEventListener('scroll', function(e) { if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) { alert('Bottom'); } }); #el{ 宽度：400px;高度：100px；溢出-y：滚动； }