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