如何使用 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中文網其他相關文章！