如何使用 jQuery 检测可滚动 Div 中的滚动结束？

使用 jQuery 检测可滚动 Div 中的滚动结束

使用动态内容时，您可能会遇到需要加载更多内容的情况，如下所示用户滚动到容器元素的底部。 jQuery 提供了一种便捷的方法来检测启用滚动的 div 的此事件。

要确定用户何时到达 div 的底部，您可以将元素的scrollTop 和innerHeight 之和与其scrollHeight 进行比较：

<code class="javascript">if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
  // End of scroll reached
}</code>

代码实现：

<code class="javascript">jQuery(function($) {
  $('#flux').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
      alert('End of div reached');
    }
  })
});</code>

说明：

• scrollTop 返回滚动条的像素数元素已垂直滚动。
• innerHeight 检索元素的内部高度，不包括滚动条。
• scrollWidth 表示元素内容的总高度，包括视口之外的区域。

当scrollTop和innerHeight之和等于scrollHeight时，表明用户已经滚动到div的最底部。

补充说明：

在 jQuery 的早期版本中，bind() 用于附加事件处理程序。但是，根据文档，自 jQuery 1.7 起，on() 是首选方法。

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