检查用户是否已滚动到底部(不仅是窗口,还有任何元素)

2022-02-22 00:00:00 scroll jquery javascript pagination

我正在制作一个分页系统(有点像Facebook),当用户滚动到底部时加载内容。我想最好的方法是找出用户何时在页面底部,然后运行Ajax查询来加载更多帖子。

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

我正在使用jQuery,因此请随时提供使用它的答案。


解决方案

我不太确定为什么还没有发布,但根据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在浏览器中有广泛的支持,更准确地说是从ie8开始,而clientHeightscrollTop都是大家都支持的。即使是ie 6。这应该是跨浏览器安全的。

相关文章