Intersection Observerを使おう

特定要素が画面内に入ったら発火する監視システムです。
Intersection Observer は特定の要素が指定領域内に入ったかどうかを検知するAPIです。

基本的には IntersectionObserver を呼び出して、第1引数に実行したい関数、第2引数にオプション設定を記述します。オプションは初期値でよければなくてもOK。

const options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}
 
const observer = new IntersectionObserver(callback, options);

簡単な実装コード

　//監視対象を選択する
const child = document.querySelector('.child');

// 要素が表示されたら実行する動作
const cb = function(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {

            //一度表示したらずっと表示
            observer.unobserve(entry.target); 
        } else {
        }
    });
}

 //オプション設定できる
const options = {
    root: null,
    rootMargin: "-300px 0px",
    threshold: [0, 0.5, 1]
};

// 実行する
const io = new IntersectionObserver(cb, options);

// child に到達したら発動
io.observe(child);

オプション設定について

root

ターゲットとなる要素が見えるかどうかを判定するためのベース部分を指定します。デフォルトはブラウザーのビューポートです。

rootMargin

交差を検知する、上記 root からの距離です。これを利用してイベントを発生させる位置を調整できます。例えば 10px を指定した場合、交差の判定をroot要素の周りから10px分拡大します。見える少し前に実行させたい時に使えますね。要素が見えてきてから実行させたい時は負の値を指定するといいでしょう。記述方法はCSSの margin とほぼ同じですが、単位は px か % に限られます。デフォルトは 0px です。

threshold

関数を実行するタイミングを 0〜1 の間で記述します。ターゲットとなる要素が見え始めた瞬間と見え終わりの瞬間が 0、半分通過したときは 0.5、すべて見えている状態が 1 です。[0, 0.5, 1] のように配列形式でも記述できます。その場合は交差量が 0、50％、100％の時にコールバック関数が呼ばれます。デフォルトでは0です。