首頁 > web前端 > js教程 > 主體

如何使用 jQuery 檢測使用者何時滾動到 Div 底部?

DDD
發布: 2024-10-28 20:37:31
原創
798 人瀏覽過

How to Detect When a User Has Scrolled to the Bottom of a Div Using jQuery?

使用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>

    if($(this).scrollTop() $(this ).innerHeight() >= $(this)[0].scrollHeight)
      :
    • 檢查目前捲動位置和內部高度總和是否大於或等於總內容高度。
    如果為 true,此條件表示使用者已捲動至或超出 div 的底部。
  • alert('endreach')
:顯示到達內容末端時發出警報訊息。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!