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;
});スクロールの上下方向を判別する事で、下に移動した時に特定の要素を非表示にしたり、上にスクロールした時に上部メニューを表示したりする事が可能です。
このページでは上下のスクロールを判別していますが同じ方法で左右のスクロールの方向を判別する事も可能です。