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

不使用jQuery 檢測滾動方向

在Web 開發中，檢測滾動方向對於實現無限滾動或折疊等功能非常有用工具列。雖然像 jQuery 這樣的函式庫提供了簡單的解決方案，但讓我們探索如何在不使用它們的情況下實現這一點。

要確定捲動方向，我們可以追蹤先前的捲動位置（scrollTop 或 pageYOffset）並將其與目前捲動進行比較位置。這種差異表明我們是向上還是向下滾動。

以下是示範此方法的 JavaScript 片段：

<code class="javascript">var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ 
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop) {
      // downscroll code
   } else if (st < lastScrollTop) {
      // upscroll code
   } // else was horizontal scroll
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);</code>

在此程式碼中，我們檢查目前捲動位置是否大於或小於上一個捲動位置。如果它更大，我們將向下滾動，如果它更小，我們將向上滾動。水平滾動也是透過檢查滾動位置是否不變來考慮的。

透過儲存先前的捲動位置並將其與目前位置進行比較，我們可以有效地偵測捲動方向，而不需要外部函式庫。此方法可以應用於各種元素，包括用於全域滾動檢測的視窗物件。

以上是如何在沒有 jQuery 的情況下確定 JavaScript 中的滾動方向？的詳細內容。更多資訊請關注PHP中文網其他相關文章！