ある要素が画面に表示されたら処理を実行する

投稿日：2022年02月27日 20時58分09秒
更新日：2022年03月03日 09時32分10秒

デモ

ぴよよ〜〜ん

window_scroll

class window_scroll{
        
    /**
    * 状態フラグ
    */
    flg_up = false;

    /**
     * ポップアップ表示するタグID
     */
    popupID;

    /**
     * ポップアップ表示の条件タグ
     */
    targetID;

    constructor( popupID, targetID ){
        console.log("start[window_scroll.constructor( popupID = " + popupID + " , targetID = " + targetID + " )]");
        this.popupID = popupID;
        this.targetID = targetID;
    }

    /**
    * アニメーション定義関数：下げる
    */  
    anime_down(){
        console.log("start[window_scroll.anime_down()]");
        anime({
            targets: ['#' + this.popupID],
            translateY: '0px',
            duration: 1500
        });
    }
    /**
    * アニメーション定義関数：上げる
    */
    anime_up(){
        console.log("start[window_scroll.anime_up()]");
        anime({
            targets: ['#' + this.popupID],
            translateY: '-250px',
            duration: 1500
        });
    }

    /**
    * スクロールイベント
    */
    scrollEvent(){
        console.log("start[window_scroll.scrollEvent()]");

        // content3の表示位置を取得
        var targetElem = document.getElementById(this.targetID);
        var targetElem_position = targetElem.getBoundingClientRect();

        // 現在の縦位置
        var posY = window.innerHeight;

        console.log(targetElem_position.bottom + " <= " + posY);

        // スクロール位置とフラグによってアニメーションを実行
        if(targetElem_position.bottom <= posY && flg_up == true){   
            this.anime_up();
            flg_up = false;
        }else if(targetElem_position.bottom > posY && flg_up == false){
            this.anime_down();
            flg_up = true;
        }
    }
}

説明

この処理ではanime.jsを使用しています。これはアニメーションを簡単に綺麗にするためのもので、使わないと出来ないわけではありません。
今回は大きく飛び出してから小さく上下して止まるようにしたかったので使っています。
もし使いたくない場合はthis.popupIDタグの位置を変更するようにanime_up()とanime_down()の処理を変えてください。

現在の表示位置と要素の位置情報から、指定要素の表示/非表示を切り替えています。

これは要素の絶対位置を取得する「getBoundingClientRect()関数」と画面表示領域の高さを取得する「window.innerHeight関数」を使って実装しています。

※絶対位置を取得する要素をelem、getBoundingClientRect()関数の実行結果がelem_positionとする

要素の絶対位置を取得する「getBoundingClientRect()関数」

ウィンドウまたは別のビューポートから見て、要素の位置を返します。
使い方は以下の通りです。

var elem= document.getElementById('[要素ID]');
var elem_position = elem.getBoundingClientRect();

// ウィンドウのトップから見てのY座標位置を取得
console.log(elem_position.top);
console.log(elem_position.bottom);

// ウィンドウの左端から見てのX座標位置を取得
console.log(elem_position.left);
console.log(elem_position.roght);

画面表示領域の高さを取得する「window.innerHeight関数」

console.log(window.innerHeight);

こちらを使って何かする場合、X軸のスクロールバーも表示領域内に表示されていることに注意してください。

Y軸を下にスクロールをしていくと「elem_position.top/elem_position.bottom」の値が減少していきます。この現象幅は「window.scrollY」と同じです。

画面を上からスクロールし、「 elem_position.top == window.innerHeight」のとき、 elemの上部が画面表示領域に触れたことになります。「 elem_position.bottom == window.innerHeight」のときは、 elemの全てが画面に表示されたことになります。

この判定を利用して、「elem_position.bottom <= window.innerHeight」で表示し「elem_position.bottom > window.innerHeight」で非表示にする処理を行っています。