如何在不使用 jQuery 的情況下確定 JavaScript 中的滾動方向？

不使用 jQuery 確定滾動方向

偵測滾動方向

無需依賴 jQuery 即可實現確定滾動事件的方向。這是一個 JavaScript 實作：

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

// Adjust the element selector based on the target of your scroll event.
document.querySelector('body').addEventListener("scroll", function() {
   var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop) {
      // Downscroll code
   } else if (st < lastScrollTop) {
      // Upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // Account for negative scrolling or devices with touch events
}, false);</code>

在此程式碼中：

• lastScrollTop 儲存上一個捲動位置。
• 滾動事件偵聽器追蹤目前滾動位置st.
• 透過比較st和lastScrollTop，可以判斷滾動方向。
• 向下捲動時執行if語句，向上捲動時執行else if語句。
• 將lastScrollTop更新為目前滾動位置，為下一個滾動事件做準備。

避免使用「返回頂部」按鈕

而不是添加「返回頂部」按鈕，您可以透過偵測滾動方向來採用更平滑的方法。例如，您可以：

• 顯示浮動導覽欄，向下捲動時可見，向上捲動時隱藏。
• 使用 CSS 動畫隨著頁面的變化顯示或淡出元素滾動。
• 根據捲動方向調整頁面上元素的不透明度，創造視差效果。

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