使用jQuery检测用户何时滚动到div的底部

Question

我有一个div框（称为“通量”），里面包含可变数量的内容。此divbox的溢出设置为auto。

现在，我想做的是，当使用滚动到此DIV框的底部时，将更多内容加载到页面中，我知道如何执行此操作（加载内容），但是我不知道如何检测用户何时滚动到div标签的底部？如果我想在整个页面上这样做，我会选择.scrollTop并将其从.height中减去。

但是我似乎无法在这里这样做？

我尝试从磁通量中获取.scrollTop，然后将所有内容包装在一个称为inner的div中，但是如果我将磁通量的innerHeight返回564px（div的高度设置为500）和“
innner”的高度当div底部显示564时，它将返回1064和滚动顶部。

我能做什么？

Answer 1

您可以使用一些属性/方法：

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

因此，您可以取前两个属性的总和，当它等于最后一个属性时，您已经到达末尾：

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

编辑：我已经按照以下方式将“绑定”更新为“开启”：

从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。