不使用 jQuery 來偵測滾動方向
確定滾動方向對於增強使用者體驗至關重要。雖然 jQuery 簡化了此任務，但使用普通 JavaScript 也可以實現類似的功能。
理解問題
提供的程式碼嘗試透過比較目前的scrollTop 來偵測滾動方向值為零。然而，這種方法是有缺陷的，因為它假設滾動總是從零開始。實際上，滾動位置可以是任何值。
手動偵測滾動方向
偵測滾動方向的關鍵是儲存先前的scrollTop值並將其與目前值。噹噹前值大於前一個值時，滾動向下移動。相反，如果當前值小於前一個值，則滾動向上移動。
實作
以下JavaScript 程式碼片段示範如何偵測捲動方向：
<code class="javascript">var lastScrollTop = 0;
// Add event listener to the target element
element.addEventListener("scroll", function () {
// Get the current scroll position
var st = window.pageYOffset || document.documentElement.scrollTop;
// Compare the current and previous scroll positions
if (st > lastScrollTop) {
// Downscroll code
} else if (st < lastScrollTop) {
// Upscroll code
} else {
// Horizontal scroll
}
// Update the lastScrollTop value
lastScrollTop = st <= 0 ? 0 : st;
}, false);</code>確保相容性
確保相容性確保相容性
此程式碼應該適用於大多數現代瀏覽器。但是，為了向後相容，建議使用 window.pageYOffset 或 document.documentElement.scrollTop 屬性來取得滾動位置。此外，lastScrollTop 變數應初始化為零，以處理負滾動或行動裝置上的滾動。
結論透過利用本文中所述的方法，您可以使用原生 JavaScript 有效偵測滾動方向。該技術對於實現延遲載入、無限滾動和平滑滾動等功能特別有用。以上是如何在沒有 jQuery 的情況下偵測 JavaScript 中的滾動方向？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
