首頁  >  文章  >  web前端  >  如何使用 jQuery 檢測使用者何時到達具有可變內容的 Div 底部?

如何使用 jQuery 檢測使用者何時到達具有可變內容的 Div 底部?

Linda Hamilton
Linda Hamilton原創
2024-10-30 20:00:03412瀏覽

How to Detect When a User Has Reached the Bottom of a Div with Variable Content Using jQuery?

使用jQuery 偵測Div 捲動結束

目標:
確定使用者何時滾動到底部指定使用者何時滾動到底部元素的。

問題:
如何偵測使用者何時到達內容數量可變且溢位設定為自動的 div 底部?

答案:

要偵測div 滾動的結束,請使用以下jQuery 屬性/方法:

  • $() 。 scrollTop():傳回元素水平或垂直滾動的量。
  • $().innerHeight():傳回元素的內部高度。
  • DOMElement.scrollHeight:傳回元素內容的高度。

結合前兩個屬性得到總的可見高度,並與scrollHeight比較來決定當使用者捲動到底部時。

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

附加說明:

  • 提供的程式碼使用 jQuery 1.7 語法。對於舊版本,請使用 .bind() 而不是 .on()。
  • 即使動態新增或刪除 div 內的內容,此解決方案也能正常運作。
  • 調整事件處理程序到您喜歡的容器和操作。

以上是如何使用 jQuery 檢測使用者何時到達具有可變內容的 Div 底部?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn