JavaScript | 上にスクロールしたのか下にスクロールしたのかを判別する方法

JavaScriptのスクロールイベントで上にスクロールしたのか下にスクロールしたのかを判別する方法を紹介しています。

スクロールの向きを取得する

addEventListener()メゾットを使ったスクロールイベントで、イベント実行時に上にスクロールしたのか下にスクロールしたのかを判別する動作サンプルとJavaScriptのサンプルコードになります。

See the Pen JavaScript | Event when the element enters the screen by scrolling by yochans (@yochans) on CodePen.

この方法ではスクロールする前の位置を変数「set_position」に格納しており、初期値は「0」でスクロールイベント処理内で新しい位置に値を上書きしています。

スクロールイベント発生後、スクロールする前の位置「set_position」より現在のスクロールポジションが大きいか小さいかで、スクロールの方向を判別しています。

スクロールする前の位置より大きい場合は下へのスクロール、小さい場合は上へのスクロールとなります。

let set_position = 0;
window.addEventListener('scroll', function () {

	if (set_position < document.documentElement.scrollTop) {
		console.log(`down`);
	} else {
		console.log(`up`);
	}

	set_position = document.documentElement.scrollTop;
});

スクロールの上下方向を判別する事で、下に移動した時に特定の要素を非表示にしたり、上にスクロールした時に上部メニューを表示したりする事が可能です。

このページでは上下のスクロールを判別していますが同じ方法で左右のスクロールの方向を判別する事も可能です。