如何偵測使用者何時捲動到非視窗元素的底部？

偵測捲動至非視窗元素的底部

分頁系統（如Facebook 使用的系統）會在使用者接近頁面時載入其他內容頁面底部。為了實現這一點，確定用戶何時滾動到底部、超出可見視窗至關重要。

使用 jQuery 的解決方案：

jQuery 提供了一種有效的方法來監視滾動活動。透過利用視窗物件的 .scroll() 事件處理程序，您可以建立一個偵聽器，每當滾動位置變更時就會觸發該偵聽器。以下程式碼示範如何偵測使用者何時到達頁面底部：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

此程式碼計算從頁面頂部到使用者目前捲動位置($(window). scrollTop()) 並將其新增至可見窗口的高度($(window).height())。如果這個總和等於文件的總高度 ($(document).height())，則表示使用者已捲動到底部。

確定與底部的接近度：

另一種情況可能是偵測使用者何時接近底部，而不是精確到達底部。若要達到此目的，請稍微修改程式碼如下：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

當使用者捲動距離底部 100 像素以內時，此程式碼會觸發「近底部」警報。根據需要調整“100”值以定義所需的接近閾值。

以上是如何偵測使用者何時捲動到非視窗元素的底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！