如何使用 jQuery 检测用户何时滚动到 Div 底部

您已经创建了一个包含动态内容的 div 元素，其中包含“自动”溢出设置。为了增强用户体验，您希望在用户滚动到此 div 框底部时加载其他内容。但是，您不确定如何检测该特定事件。

此检测的关键在于利用特定的 jQuery 属性和方法：

• $().scrollTop():表示元素已滚动的像素数
• $().innerHeight()：表示元素的内部高度
• DOMElement.scrollHeight：返回元素内容的高度

要确定用户何时到达 div 底部，您可以将前两个属性的总和与第三个属性进行比较。当这些值匹配时，就到达了 div 的末尾。

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

此解决方案利用 on() 方法，该方法是 jQuery 版本 1.7 中事件处理的首选方法。

附加说明：

• 事件监听器附加到带有 #flux ID 的 div，它代表您感兴趣监视的元素。
• alert() 函数用于演示目的。您可以在此处添加您自己的加载附加内容的逻辑。
• 可以在 http://jsfiddle.net/doktormolle/w7X9N/ 找到一个实例。