如何使用jQuery检查DIV是否一直滚动到底部答案

【问题标题】：How to check if a DIV is scrolled all the way to the bottom with jQuery如何使用jQuery检查DIV是否一直滚动到底部
【发布时间】：2011-08-15 06:10:10
【问题描述】：

我有一个带有溢出的 div:scroll。

我想知道它当前是否一直向下滚动。如何，使用 JQuery？

这个不行：How can I determine if a div is scrolled to the bottom?

【问题讨论】：

用google搜索找到这个，很有意思yelotofu.com/2008/10/…
您能解释一下您提供的链接不起作用的情况吗？也许也添加一些标记？

标签： javascript jquery

【解决方案1】：

这是正确的解决方案(jsfiddle)。简单看一下代码：

$(document).ready(function () {
    $('div').on('scroll', chk_scroll);
});

function chk_scroll(e) {
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
        console.log("bottom");
    }
}

请参阅this 了解更多信息。

【讨论】：

这是一个很好的解决方案。我正在研究一个解决方案，其中包含内容的 div 可以调整大小，并且每次调整 div 的大小时我都需要重新检查滚动状态，因为它不会每次都触发。有活动吗？
当您处理具有填充/边距的框时，这有点麻烦。不确定问题到底是什么。但是当我这样做时，它有时会说“底部”。
我认为该示例应使用“innerHeight”而不是“outerHeight”，否则它将不适用于 > 0px 的边框。
如果我有一个 ul 而不是 div 怎么办？当我尝试时，我总是得到 2 px 的差异。如果您除了减去该值之外还有任何解决方法，请告诉我。谢谢。
在 Chrome 中，当浏览器缩放时，像素数可以浮动（例如 33.3334216........）。为了解决这个问题，您可以检查小于一个像素的差异，例如：if (Math.abs(elem[0].scrollHeight - elem.scrollTop() - elem.outerHeight()) < 1)

【解决方案2】：

function isScrolledToBottom(el) {
    var $el = $(el);
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}

这是@samccone 答案的变体，其中包含@HenrikChristensen 关于亚像素测量的评论。

【讨论】：

这是唯一一个始终在 Chrome 中正常工作的答案。有了其他答案，它有时可以在 Chrome 中工作，有时不能（Firefox 没有这个亚像素问题，并且无论如何都可以正常工作）。
非常好，这个解决方案汇总了来自上述 cmets 的每条建议。谢谢！
这是唯一适用于 Chrome 和 Firefox 的解决方案。感谢您的回答！

【解决方案3】：

你可以这样做

(scrollHeight - scrollTop()) == outerHeight()

应用所需的 jQuery 语法，当然...

【讨论】：

【解决方案4】：

代码如下：

$("#div_Id").scroll(function (e) {
    e.preventDefault();
    var elem = $(this);            
    if (elem.scrollTop() > 0 && 
            (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
        alert("At the bottom");
    }
});

【讨论】：

【解决方案5】：

因为它在没有 jQuery 的情况下也能工作：

 var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;

我愿意：

 var node = $('#mydiv')[0]; // gets the html element
 if(node) {
    var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
 }

【讨论】：

【解决方案6】：

Since 2012 Firefox 包含 scrollTopMax 属性。如果scrollTop === scrollTopMax 你在元素的底部。

【讨论】：

有趣，虽然没有任何浏览器支持（而且似乎永远不会支持？）

【解决方案7】：

不带jquery，用于onScroll事件

var scrollDiv = event.srcElement.body
window.innerHeight + scrollDiv.scrollTop == scrollDiv.scrollHeight

【讨论】：

【解决方案8】：

对我来说，$el.outerHeight() 给出了错误的值（由于边框宽度），而$el.innerHeight() 给出了正确的值，所以我使用了

function isAtBottom($el){

    return ($el[0].scrollHeight - $el.scrollTop()) == $el.innerHeight();
}

【讨论】：