jQueryを使わずにJavaScriptでスクロール方向を検出する方法?

jQuery を使用しないスクロール方向の検出

スクロールの方向を決定することは、ユーザー エクスペリエンスを向上させるために重要です。 jQuery はこのタスクを簡素化しますが、バニラ JavaScript を使用して同様の機能を実現することもできます。

問題を理解する

提供されたコードは、現在のスクロールトップを比較することによってスクロール方向を検出しようとします。値をゼロにします。ただし、このアプローチには欠陥があります。スクロールが常にゼロから始まると想定しているからです。実際には、スクロール位置は任意の値にできます。

スクロール方向を手動で検出する

スクロール方向を検出する鍵は、前のscrollTop値を保存し、それを前の値と比較することです。現在の値。現在の値が前の値より大きい場合、スクロールは下に移動します。逆に、現在の値が前の値より小さい場合、スクロールは上に移動します。

実装

次の JavaScript コード スニペットは、スクロール方向を検出する方法を示しています。

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

// Add event listener to the target element
element.addEventListener("scroll", function () {
  // Get the current scroll position
  var st = window.pageYOffset || document.documentElement.scrollTop;

  // Compare the current and previous scroll positions
  if (st > lastScrollTop) {
    // Downscroll code
  } else if (st < lastScrollTop) {
    // Upscroll code
  } else {
    // Horizontal scroll
  }

  // Update the lastScrollTop value
  lastScrollTop = st <= 0 ? 0 : st;
}, false);</code>

互換性の確保

このコードは、ほとんどの最新のブラウザで動作するはずです。ただし、下位互換性を維持するために、window.pageYOffset プロパティまたは document.documentElement.scrollTop プロパティを使用してスクロール位置を取得することをお勧めします。さらに、モバイル デバイスでのネガティブ スクロールやスクロールを処理するには、lastScrollTop 変数を 0 に初期化する必要があります。

結論

この記事で説明されているアプローチを利用すると、次のことが可能になります。バニラの JavaScript を使用してスクロール方向を効果的に検出します。この手法は、遅延読み込み、無限スクロール、スムーズ スクロールなどの機能を実装する場合に特に役立ちます。

以上がjQueryを使わずにJavaScriptでスクロール方向を検出する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。