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

使用 jQuery 检测滚动到 Div 的底部

在自动溢出的 div 中处理可变高度内容时，确定当用户到达 div 底部时可能是一个挑战。本文提供了使用 jQuery 检测此事件的解决方案。

了解 Div 维度

要检测用户何时滚动到 div 底部，了解这一点至关重要与 div 尺寸关联的属性和方法。

• scrollTop()：返回内容垂直向下滚动的像素数。
• insideHeight()：返回 div 的内部高度，不包括滚动条和边框。
• scrollHeight：返回 div 内容的总高度，包括隐藏内容。

检测底部滚动事件

以下 jQuery 代码可以检测用户何时到达 div 底部：

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

代码说明

• $(#flux)：选择ID为“flux”的div。
• on ('scroll')：给div绑定滚动事件

• if($(this).scrollTop() $(this).innerHeight() >= $(this)[0].scrollHeight):

  • 检查当前滚动位置和内部高度之和是否大于或等于总内容高度。
  • 如果为 true，此条件表示用户已滚动到或超出 div 的底部。
• alert('endreach')：显示到达内容末尾时发出警报消息。

以上是如何使用 jQuery 检测用户何时滚动到 Div 底部？的详细内容。更多信息请关注PHP中文网其他相关文章！