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 中国語 Web サイトの他の関連記事を参照してください。