スクロールイベントの方向判定をマスターして、ユーザー体験を向上させる

2024-04-02

jQueryスクロールイベントの方向を判定する方法

event.originalEvent.deltaY プロパティは、スクロールの方向と量を表す数値です。このプロパティの値が正の場合、スクロールは下方向に、負の場合、スクロールは上方向になっています。

$(window).on('scroll', function(event) {
  const deltaY = event.originalEvent.deltaY;
  if (deltaY > 0) {
    // 下方向にスクロール
  } else if (deltaY < 0) {
    // 上方向にスクロール
  }
});

scrollTop プロパティは、スクロールバーの位置を表します。このプロパティの値を前回のスクロールイベント時の値と比較することで、スクロールの方向を判定できます。

let previousScrollTop = 0;

$(window).on('scroll', function(event) {
  const currentScrollTop = $(window).scrollTop();
  if (currentScrollTop > previousScrollTop) {
    // 下方向にスクロール
  } else if (currentScrollTop < previousScrollTop) {
    // 上方向にスクロール
  }

  previousScrollTop = currentScrollTop;
});

jQueryプラグインを使用する

スクロールイベントの方向を判定する機能を提供するjQueryプラグインもいくつかあります。例えば、Ex Scroll プラグインは、スクロールイベントの開始/終了タイミングやスクロール方向を簡単に判定できます。

$(window).exScroll({
  onScrollStart: function(event) {
    // スクロール開始
  },
  onScrollEnd: function(event) {
    // スクロール終了
  },
  onScrollUp: function(event) {
    // 上方向にスクロール
  },
  onScrollDown: function(event) {
    // 下方向にスクロール
  }
});

これらの方法のどれを使用するかは、開発するアプリケーションの要件によって異なります。

補足

スクロールイベントは、ブラウザやデバイスによって挙動が異なる場合があります。
スクロールイベントの方向を判定する際は、ブラウザやデバイスの互換性を考慮する必要があります。

event.originalEvent.deltaY プロパティを使用する

$(window).on('scroll', function(event) {
  const deltaY = event.originalEvent.deltaY;
  if (deltaY > 0) {
    console.log('下方向にスクロール');
  } else if (deltaY < 0) {
    console.log('上方向にスクロール');
  }
});

scrollTop プロパティを使用する

let previousScrollTop = 0;

$(window).on('scroll', function(event) {
  const currentScrollTop = $(window).scrollTop();
  if (currentScrollTop > previousScrollTop) {
    console.log('下方向にスクロール');
  } else if (currentScrollTop < previousScrollTop) {
    console.log('上方向にスクロール');
  }

  previousScrollTop = currentScrollTop;
});

Ex Scroll プラグインを使用する

$(window).exScroll({
  onScrollUp: function(event) {
    console.log('上方向にスクロール');
  },
  onScrollDown: function(event) {
    console.log('下方向にスクロール');
  }
});

スクロールイベントの方向を判定するその他の方法

event.target プロパティは、スクロールイベントが発生した要素を表します。このプロパティを使用して、スクロールイベントが発生した要素の種類を判定することで、スクロール方向を推測できます。

例えば、以下のコードは、スクロールイベントが発生した要素がウィンドウかどうかを判定し、ウィンドウの場合は下方向にスクロール、それ以外の場合は上方向にスクロールと判断しています。

$(window).on('scroll', function(event) {
  if (event.target === window) {
    // 下方向にスクロール
  } else {
    // 上方向にスクロール
  }
});

let previousTimeStamp = 0;

$(window).on('scroll', function(event) {
  const currentTimeStamp = event.timeStamp;
  if (currentTimeStamp > previousTimeStamp) {
    // 下方向にスクロール
  } else if (currentTimeStamp < previousTimeStamp) {
    // 上方向にスクロール
  }

  previousTimeStamp = currentTimeStamp;
});

マウスホイールイベントを使用する

マウスホイールを回転した際に発生するmousewheel イベントを使用することで、スクロール方向を判定できます。

$(window).on('mousewheel', function(event) {
  const deltaY = event.originalEvent.wheelDeltaY;
  if (deltaY > 0) {
    // 下方向にスクロール
  } else if (deltaY < 0) {
    // 上方向にスクロール
  }
});

タッチイベントを使用する

タッチデバイスでは、touchstart イベントと touchend イベントを使用して、スクロール方向を判定できます。

$(window).on('touchstart', function(event) {
  const startY = event.originalEvent.touches[0].clientY;
});

$(window).on('touchend', function(event) {
  const endY = event.originalEvent.changedTouches[0].clientY;
  if (startY > endY) {
    // 下方向にスクロール
  } else if (startY < endY) {
    // 上方向にスクロール
  }
});