如何使用 JavaScript 偵測網頁底部的滾動位置？

利用 JavaScript 偵測頁面底部的捲動位置

為了確定使用者是否已捲動到網頁底部，JavaScript 提供了強大的解決方案。這對於在底部新增內容時觸發自動捲動至關重要，同時避免打擾正在閱讀頁面上方內容的使用者。

解決方案：監控滾動事件

到監視用戶的滾動行為並確定其當前位置，可以在window 物件上實現onscroll 事件監聽器：

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

在此事件中handler:

• window.innerHeight表示瀏覽器視窗的可視高度。
• Math.round(window.scrollY) 傳回目前垂直捲動位置，四捨五入到最接近的整數。
• document.body.offsetHeight 表示頁面總高度content.

透過將可視高度和捲動位置總和與頁面內容高度進行比較，可以判斷使用者是否已經到達底部。如果總和大於或等於頁面高度，則使用者位於底部。

結論

利用 JavaScript 的 onscroll 事件和簡單的計算，可以準確檢測使用者何時滾動到網頁底部。這允許您實現上下文行為，例如自動捲動或根據用戶的位置更新內容。

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