如何在沒有 jQuery 的情況下偵測 JavaScript 中的滾動方向？

不使用 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中文網其他相關文章！