JavaScriptで上下のスクロールを判定する方法

JavaScriptを使って、上下どちらにスクロールしたかを判定したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装例
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
上下スクロール判定を使った実装例です。
上スクロールした時、上部にヘッダーを固定。
下スクロールの時はヘッダーを固定しないようにしてます。
実装手順は以下の通りです。
上下スクロールを判定するJavaScript
var position = 0;
window.addEventListener('scroll', function () {
if (position < document.documentElement.scrollTop) {
//下スクロール
document.querySelector('header').classList.remove('fixed');
} else {
//上スクロール
document.querySelector('header').classList.add('fixed');
}
position = document.documentElement.scrollTop;
console.log(position);
});
上下スクロールを判定するJavaScriptコード例です。
まず最初に現在のスクロール位置を入れる変数を定義。
初期値は0とします。
addEventListenerを使ってスクロールしたかどうかの実行関数を定義します。
使い方は以下の通りです。
window.addEventListener(‘scroll’,function(){}
上記関数内で上下スクロールの判定を行います。
現在のスクロール位置をdocument.documentElement.scrollTopを使って取得。
最初に定義した変数に対して、現在のスクロール位置が上か下かをif文を使って判定します。
関数の最後(スクロールが終わった)で現在のスクロール位置を変数の値に上書きすればOKです。
以上で実装完了です。
まとめ
JavaScriptで上下のスクロールを判定する方法について紹介しました。
以上で解説を終わります。