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

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都得到了大家的支持。甚至六号。这应该是跨浏览器安全的。