スクロールで動く仕組み検証 【Javascript】【脱jQuery】

はじめに

画面をスクロールで、何かの要素が浮かび上がったり、反応する仕組みを、JQuery無しで作るのに、
具体的に要素がどのように判定されているのかを検証するものです。

また、動きの要素にコーディング終了後にクラスを付け加えることで、動きを一括して実装できるので
製作スピードが向上します。

動作デモ

See the Pen スクロール判定のデモ by masato yamada (@marchin133) on CodePen.

スクロールの計測

スクロールは window.pageYOffset で取得。

判定したい要素の計測

getBoundingClientRect().topで、判定したい要素の上部の、HTMLの一番上からの高さがわかる。

判定ロジック

javascript

document.addEventListener("DOMContentLoaded", function () {

    let windowHeight = document.getElementById('windowHeight');
    let scrollVolume = document.getElementById('scrollVolume');
    let markerLine = document.getElementById('markerLine');
    let markerLinetext = document.getElementById('markerLinetext');

    //動かす要素を探す
    let fadeConts = document.querySelectorAll('.anime');
    //動かす要素の配列を作る
    let moveConts = [];


    //windowの高さ & リサイズされたら再取得
    let windowH = window.innerHeight;
    window.addEventListener('resize', function () {
        windowH = window.innerHeight;
        windowHeight.textContent = windowH;
    }, false);

    windowHeight.textContent = windowH;

    //動かす要素の位置情報を取得しておく
    for (let i = 0; i < fadeConts.length; i++) {
        let rect = fadeConts[i].getBoundingClientRect().top;
        moveConts.push(rect);
        fadeConts[i].textContent = rect;
    }

    // marker
    // 画面の下からXpxのライン

    let markerLineVolume = windowH - (windowH / 4);
    markerLinetext.textContent = markerLineVolume;

    markerLine.style.top = markerLineVolume + 'px';

    //画面スクロールしたときに呼び出される
    window.addEventListener('scroll', function () {

        //スクロール位置
        let scrollDepth = window.pageYOffset;
        scrollVolume.textContent = scrollDepth;

        //判定位置は、スクロール量に伴ってそのままずれる
        markerLine.style.top = markerLineVolume + scrollDepth + 'px';

        //判定位置
        let markerLineNum = markerLineVolume + scrollDepth;

        for (let i = 0; i < moveConts.length; i++) {
            if (markerLineNum > moveConts[i]) {
                fadeConts[i].classList.add("show");
                console.log(i + "が超えた");
                //console.log(moveConts[0]);
                //console.log(windowHeight);
                //console.log(moveConts[i]);
            } else {
                //fadeConts[i].classList.remove("show");
            }
        }


    }, { passive: true });



}, false);

スクロール量の考え方

当たり前のようで、意外に私はハマってしまいました。
スクロール量と判定要素の関係から、画面に対して下にスクロール量が発生するような感覚だったのですが、
画面のウィンドウの上部にスクロール量が発生するイメージで考えるとわかりやすいです。

判定する要素が、ブラウザ画面の下端（実際には画面の比率などで判定位置は変わることが多いと思いますがそれも例には含めてあります）
に達しているということは、スクロール量だけでは足りず、スクロール量に、画面の高さを加えたものが、判定位置になります。

例：
判定位置の要素が、2000pxの位置に絶対位置で配置されているとする
画面の高さは、1200px（ブラウザの表示領域の高さ）　の場合、800pxスクロールすると、判定位置の2000pxに達する。