JavaScriptでスクロールをトラックする方法


  1. イベントリスナーを使用する方法:
window.addEventListener('scroll', function() {
  // スクロールイベントが発生した時の処理をここに記述します
});

上記のコードでは、scroll イベントに対してリスナーを追加しています。スクロールが発生するたびに、指定した処理が実行されます。

  1. スクロール位置の取得:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

上記のコードでは、scrollTop 変数に現在のスクロール位置を取得しています。この値を使用して、スクロール位置に応じた処理を行うことができます。

  1. スクロールイベントの制御:
var isScrolling;
window.addEventListener('scroll', function() {
  // スクロールイベントが発生した時の処理をここに記述します
  // スクロールイベントが発生している間はisScrollingをtrueに設定します
  window.clearTimeout(isScrolling);
  isScrolling = setTimeout(function() {
    isScrolling = false;
  }, 200); // 200ミリ秒の間、スクロールイベントが発生しなければisScrollingをfalseに設定します
});

上記のコードでは、スクロールイベントが頻繁に発生する場合に、処理のパフォーマンスを向上させるために、スクロールイベントの制御方法を示しています。指定した時間内にスクロールイベントが再度発生しなければ、処理を実行します。