Intersection Observer とは？ - ITチュートリアル

Intersection Observerとは何ですか？

Intersection Observer とは？

Intersection Observer は、Webページ上の要素の可視性を効率的に追跡するための強力な API です。従来の要素の可視性判定は、スクロールイベントやタイマーを用いた複雑な処理が必要でしたが、Intersection Observer を使用することで、シンプルかつ高パフォーマンスな実装が可能になります。

Intersection Observer の仕組み

Intersection Observer は、監視対象の要素とルート要素（デフォルトはブラウザのビューポート）との交差状態を監視します。交差状態が変化するたびに、事前に登録したコールバック関数が非同期で実行され、要素の可視状態に応じた処理を実行できます。

Intersection Observer のメリット

高パフォーマンス: スクロールイベントのように頻繁に発生するイベントとは異なり、交差状態の変化時にのみコールバックが実行されるため、パフォーマンスのオーバーヘッドを最小限に抑えられます。
実装が容易: API がシンプルで使いやすいため、複雑なロジックを記述することなく、簡単に要素の可視性を監視できます。
応用範囲が広い: 画像の遅延読み込み、無限スクロール、アニメーションの実行など、さまざまな用途で活用できます。

Intersection Observer の使い方

Intersection Observer オブジェクトを作成し、コールバック関数とオプションを指定します。


const options = {
  root: null, // ルート要素 (デフォルトはビューポート)
  rootMargin: '0px', // ルート要素のマージン
  threshold: 0.5 // 交差比率の閾値 (0.5 は 50%)
};

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 要素が表示された時の処理
    } else {
      // 要素が非表示になった時の処理
    }
  });
};

const observer = new IntersectionObserver(callback, options);

監視対象の要素を observe() メソッドに渡します。


const targetElement = document.querySelector('#target');
observer.observe(targetElement);

Intersection Observer のオプション

オプション	説明
root	交差を監視するルート要素。デフォルトはブラウザのビューポート。
rootMargin	ルート要素のマージン。
threshold	交差比率の閾値。0 から 1 の間の数値で指定し、1 は 100% を表す。

Intersection Observer の応用例

画像の遅延読み込み
無限スクロール
アニメーションの実行
要素の表示回数の計測

参考資料

Intersection Observer API - Web API | MDN

よくある質問

Q1: Intersection Observer はすべてのブラウザでサポートされていますか？

A1: 主要なモダンブラウザではサポートされていますが、古いブラウザではサポートされていない場合があります。caniuse.com などでブラウザのサポート状況を確認できます。

Q2: Intersection Observer を使用しない場合の代替手段は何ですか？

A2: スクロールイベントや getBoundingClientRect() メソッドなどを組み合わせて要素の可視性を判定する方法がありますが、Intersection Observer よりもパフォーマンスや実装の容易さの面で見劣りします。

Q3: Intersection Observer のコールバック関数はいつ実行されますか？

A3: 交差状態が変化したときに、非同期で実行されます。たとえば、要素が初めて表示されたとき、完全に非表示になったとき、交差比率が閾値を超えたときなどに実行されます。

その他の参考記事:jquery observer