JavaScriptでスクロールを監視するならIntersection Observerが便利

Intersection Observerとは

Intersection Observerは、特定の領域を監視して、監視対象の要素がその領域に交差したかどうかを検知します。デフォルトでは、viewport（見えている範囲）とある要素が交差した場合に、何かを実行します。

スクロールするたびに反応するわけではないため、他の方法に比べパフォーマンス面で有利です。

Intersection Observerの使い方

Intersection Observerを使うための基本のコードです。この例では監視対象の要素「.className」とビューポートが交差した場合に処理が走ります。

監視対象の要素を取得する際、要素が単一の場合は「document.querySelector()」でも問題ありませんが、「document.querySelectorAll()」にしておけば要素が複数でも単一でも対応できるのでこちらを使う方法がおすすめです。

// 交差を監視する要素を準備
const targets = document.querySelectorAll('.className');

// 範囲の設定
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0
};

// Intersection Observerを使えるようにする
const observer = new IntersectionObserver(callback, options);

// 対象の要素をそれぞれ監視する
targets.forEach(target => {
  observer.observe(target);
});

// 交差したときに実行する関数
function callback(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) { // 監視中の要素が交差した状態ならtrue
      // 監視中の要素が交差したときの処理
    } else { // 監視中の要素が交差してない状態ならfalse
      // 監視中の要素が交差していないときの処理
    }
  });
}

範囲の設定

範囲の設定をしているオブジェクト「options」には3つの設定が行なえます。

root

ターゲットがどの要素と交差した際にイベントを発火させるかを設定できます。
nullを設定した場合はviewport（ブラウザの画面全体）が基準になります。

threshold

「ターゲットとなる要素」が「root要素」とどの程度の割合交差したらイベントを発火させるかを設定できます。
既定値は 0.0 の閾値です。

rootMargin

「root要素に設けたmargin」と「ターゲット」が交差したらイベントが発火するよう、marginの値を設定できます。
負の値を設定した場合は、「ターゲット」が「root要素からrootMarginを減らした範囲」に交差したらイベントが発火します。
既定値は "0px 0px 0px 0px" です。