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

javascript jquery scroll pagination

2022-08-29 22:30:51

我正在制作一个分页系统（有点像Facebook），当用户滚动到底部时，内容会加载。我想最好的方法是找到用户何时在页面底部并运行Ajax查询以加载更多帖子。

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

我正在使用jQuery，所以请随时提供使用它的答案。

答案 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

答案 2

我不完全确定为什么这还没有发布，但根据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更精确，同时和都得到大家的支持。即使ie 6。这应该是跨浏览器安全的。clientHeightscrollTop