Intersection Observerで要素の出現を検知

Intersection Observerは、特定の要素が画面内に出現したかどうかを検知することができます。
具体的には下記のようなケースが挙げられるでしょうか。

• ページが一定以上スクロールされた際に、特定の要素を出現させる
• ある要素が出現した際に、別の要素に対して変更を加える

など

なぜ注目したか

スクロールイベントを元にDOM操作を行う場合には、常にメインスレッドで処理が実行されており、
非常に高負荷であることから、パフォーマンスへの悪影響が懸念されていました。

IntersectionObserverを使用することで、
監視対象の要素が、「画面に入ってきたか or 画面から出ていったか」のタイミングを監視し、
そのタイミングでコールバック関数を実行させることができます。
また、処理は非同期的に実行されるため、パフォーマンスの向上も期待できます。

実装

それでは要素の出現を検知するための実装を行なっていきます。

完成イメージ

下記のCode. Penの「Result」より、動作をご確認いただけます。
Footerは元々オレンジ色ですが、画面上にFooterが出現した際には、緑に変更する処理が実装されています。

See the Pen by waibandl321 (@JumCode) on CodePen.

処理(JS)

const target = document.querySelector('.l-footer');

// オプションを指定する。
const options = {
  threshold: [0.1, 0.5, 1.0]
}

// オプションとともにIntersectionObserverオブジェクトを作成する。
const observer = new IntersectionObserver((entries) => {
  if(entries[0].isIntersecting === true) {
      target.classList.add('active');
  } else {
    target.classList.remove('active');
  }
}, options);

// 監視したい要素をobserveする。
observer.observe(target);

解説

options

• root : ターゲットが出現したかを判定するためのViewPort的な役割を持ち、デフォルトではViewPortがそのまま適用されます。
• rootMargin : 要素出現の判定場所を指定することができます。デフォルトでは0ですが、検知を少し前倒しをして行いたいときにはmarginの値を指定することで実行できます。
• threshold : コールバック関数が呼ばれるタイミングを指定するオプションです。検知の割合を示しており、0.1 = 10%という意味です。つまり、10%出現したときにコールバック関数を実行したい場合には、threshold : [0.1]とすればそのタイミングで実行させることができます。

callback

上記のサンプルコードでは、下記の記述が該当します。
検知したタイミングで実行される処理を記述しています。

if(entries[0].isIntersecting === true) {
      target.classList.add('active');
  } else {
    target.classList.remove('active');
  }

ブラウザの互換性について

Intersection Observerが出現した当初は、Safariが全滅で少し現実性がありませんでしたが、
現在モダンブラウザについては対応されているので、使用頻度が増えそうです。
IEはサポートも終了しますし、シカトします。