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

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

Linda Hamilton
發布: 2024-10-30 20:00:03
原創
451 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板