jQuery を使用せずに JavaScript でスクロール方向を決定するにはどうすればよいですか?

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