JavaScript、スクロール方向を判定する。

スクロールに応じた動きが増えてきた。

こんにちは、「ふ」です。

最近のwebサイトやアプリケーションにおいては、ユーザにボタンをクリックさせるのではなく、スクロールによってメニュー表示をさせたり、アニメーションを発火させたりする仕組みが多く見られるようになってきました。

それらを実装するにあたっては「上にスクロールしたのか下にスクロールしたのか」の判定が必要な場面も発生します。

そこで。
今回はJavaScriptを使ってスクロール方向を判定する方法について紹介していきます。

SVGコーディングブック

著者：ふ

Apple Booksでみる

仕組み。

仕組みとしては「スクロール前後の距離を比較して方向を判定する」というものです。

y方向のスクロールで考えてみましょう。
スクロールの前と後では、ページトップからの距離が当然、違ってきます。

ここでスクロール前の距離をa、スクロール後の距離をbとしたとき。
a<bなら「下にスクロールした（現在より下の部分を表示させた）」と判断できます。

逆にa>bなら「上にスクロールした（現在より上の部分を表示させた）」ことになります。
簡単な仕組みですね。

この「スクロール量の比較」のために、必要な実装は以下の通り。

a 直前の距離を取得しておく
b スクロールが発生したとき、完了後の距離を取得
c 両者を比較して、スクロールされた方向を判定。

aに関しては、最初にページがロードされた時点では「0」でいいですね。

１回目のスクロールが起きたとき。イベントハンドラを使ってb、完了後の距離を取得することにします。
前後の距離が取得できたので、cの処理。両者を比較してスクロール方向を判定します。

そして。２回目のスクロールが起きるときの、直前の距離(a2とします)は、前回スクロール完了後の距離b、ということになります。変数を１つ用意しておいて、更新させていくようにしましょう。
２回目スクロール完了後の距離bは、１回目同様イベントハンドラで取得することができます。同じく両者を比較して方向を判定→直前距離aを更新。

〜この繰り返しです。

ここではy方向を例に話しましたが、x方向についても同じことです。水平方向のスクロール前後の距離を取得し、比較するようにします。

console.log(window.scrollY);
「「３ ▶︎▶︎ 数値」」

スクロールの距離は、垂直方向ならwindow.scrollY( )でページトップからの距離を、水平方向ならwindow.scrollX( )でページ左からの距離を取得することができます。

仕組みがわかったところで、実装していきましょう。

JavaScriptで実装。

それでは「垂直方向の上下判定」として、コードを書いていきます。

「「３//スクロール直前の距離」」「「１ ....@1@」」
let pre_position = 0;

「「３//イベントハンドラ」」「「１ ....@2@」」
window.addEventListener("scroll",up_or_down);
    
function up_or_down() { 
    「「３//スクロール位置が大きくなっていれば」」「「１ ....@3@」」
    if(pre_position < window.scrollY) {
        console.log("down");
    「「３//小さくなっていれば」」「「１ ....@4@」」
    } else {
        console.log("up");
    }
    
    「「３//直前の距離を更新」」「「１ ....@5@」」
    pre_position = window.scrollY;
}

@1@ スクロール直前の位置を入れておく変数pre_positionを作り、ページロード時は0なので、初期値を入れておきます。

@2@ スクロールのイベントハンドラです。スクロールイベントが起きたとき、方向を判定する関数up_or_downを呼び出します。

以下、関数up_or_downの内容。
window.scrollYで、スクロール完了後のページtopからの位置を取得。方向を判定していきます。
判定ができたかどうかの確認のため、consoleに文字列をlogするようにします。

@3@ 取得したscrollYの値が、スクロール前に変数pre_positionに入れていたY値よりも大きければ「下にスクロールした」と判定できます。consoleに「down」と出るようにしました。

@4@ 逆にscrollYの値がpre_positionより小さければ、上にスクロールしたと判断できます。consoleには「up」と出すようにしました。

@5@ 取得したscrollYの値は、次回のスクロール直前の位置になります。スクロール判定終了後、pre_positionに代入して更新しましょう。

⬇︎は実際の動きを表現したものです。実際に試してみてください。
スクロールの方向によって画面中央に表示されるメッセージが変化します。

使い道はいろいろ。

最後までお読み下さり、ありがとうございました。
スクロールの向きを判定して、それに伴ったアクションを起こす仕組みは、いろんなwebサイトやアプリケーションで実装されています。

JavaScript、スクロールを戻したときに ヘッダーを出現させる。

〽️ ハンバーガーボタンよりも便利。

その例として。⬆︎はページを上にスクロールしたときにヘッダーを表示させるというもの。参考にしてみてくださいね。

ではまた〜 🎵