如何在不使用 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 <p>在此程式碼中：</p>
<ul>
<li>lastScrollTop 儲存上一個捲動位置。 </li>
<li>滾動事件偵聽器追蹤目前滾動位置st.</li>
<li>透過比較st和lastScrollTop，可以判斷滾動方向。 </li>
<li>向下捲動時執行if語句，向上捲動時執行else if語句。 </li>
<li>將lastScrollTop更新為目前滾動位置，為下一個滾動事件做準備。 </li>
</ul>
<h3 id="避免使用-返回頂部-按鈕">避免使用「返回頂部」按鈕</h3>
<p>而不是添加「返回頂部」按鈕，您可以透過偵測滾動方向來採用更平滑的方法。例如，您可以：</p>
<ul>
<li>顯示浮動導覽欄，向下捲動時可見，向上捲動時隱藏。 </li>
<li>使用 CSS 動畫隨著頁面的變化顯示或淡出元素滾動。 </li>
<li>根據捲動方向調整頁面上元素的不透明度，創造視差效果。 </li>
</ul></code>

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