如何偵測使用者何時滾動到網頁底部？

確定瀏覽器視窗滾動位置

在 Web 開發中，經常需要偵測使用者是否已到達網頁底部。這允許根據滾動位置自動載入內容或執行其他操作。

如何偵測捲動結束

判斷使用者是否已捲動到底部對於頁面，您可以利用 window.onscroll 事件偵聽器。每次用戶滾動頁面時都會觸發此事件，使您可以即時追蹤滾動位置。

以下JavaScript 程式碼片段示範如何偵測捲動結束：

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

這段程式碼計算目前捲動高度，它是視口高度（由window.innerHeight決定）和目前捲動偏移（由下式計算）之和Math.round(window.scrollY)).然後將該值與使用document.body.offsetHeight 獲得的文檔總高度進行比較。如果計算出的捲動高度大於或等於文件高度，則表示使用者位於或接近頁面底部。

演示

The提供的程式碼可以與Element.scrollIntoView() 方法結合使用，以便在添加其他內容時自動將用戶滾動到元素的底部添加了。

有關此功能的實際範例，請參閱以下示範：

[示範連結]

透過實作此程式碼，您可以有效地追蹤當使用者到達網頁底部時，捲動位置並執行所需的操作，例如載入新內容或變更頁面行為。

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