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>「トップに戻る」ボタンを回避します</h3>
<p>「トップに戻る」ボタンを追加する代わりにボタンをクリックすると、スクロール方向を検出することで、よりスムーズなアプローチを組み込むことができます。たとえば、次のことが可能です。</p>
<ul>
<li>下にスクロールすると表示され、上にスクロールすると非表示になるフローティング ナビゲーション バーを表示します。</li>
<li>CSS アニメーションを使用して、ページの表示と同様に要素を表示またはフェードします。 </li>
<li>スクロール方向に基づいてページ上の要素の不透明度を調整し、視差効果を作成します。</li>
</ul></code>

以上がjQueryを使用せずにJavaScriptでスクロール方向を決定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。