Written by Kasumi

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で上下のスクロールを判定する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【簡単】videoタグの再生速度を調整(早く・遅く)する方法

更新日:2022.09.09
4185
JavaScript

Javascriptでvideoタグのオプションを設定

更新日:2019.11.28
812
JavaScript

JavaScriptでCSVファイルを読み込み!配列で取得する方法

2022.11.18
30877
JavaScript

JavaScriptで指定した条件に当てはまる配列要素があるか存在をチェック。true/falseで判定する方法

2023.01.05
1081