この記事を読んだ後に理解できること

Intersection Observer APIの概要
ReactでのIntersection Observer APIの使い方

Intersection Observer APIとは？

概要

Intersection Observer APIでは、ターゲットとなる要素が指定された要素やビューポートと交差したときにコールバック関数を呼び出すことができます。

Intersection Observer APIにおいて、「指定された要素」のことをルート要素と呼びます。

要素を指定しない場合、ルート要素はビューポートになります。

ビューポートとはユーザから見えている領域のことを指しています。

具体例

当ブログのトップページにおけるヘッダーの挙動は、Intersection Observer APIを利用してCSSを変更しています。

これはビューポートがターゲット要素として指定したファーストビュー部分と交差したことをIntersection Observer APIで検知してCSSを変更しています。

コールバック関数の呼び出しタイミング

コールバック関数はターゲットとなる要素が最初にスクロールで表示されたタイミングと最後にスクロールで表示されたタイミングです。

例えば、当ブログのMY PROFILEがターゲット要素である場合、以下のタイミングでコールバック関数が呼び出されます。

スクロールでMY PROFILEの文字が見えたタイミング

スクロールでMY PROFILEの要素が画面上部から見切れたタイミング

基本的な使い方

    const options: IntersectionObserverInit = {
      root: null,
      rootMargin: "0px",
      threshold: 1.0,
    };
    const observer = new IntersectionObserver(callback, options);

まずはIntersectionObserverをインスタンス化します。

第1引数にコールバック関数、第2引数にIntersectionObserverの設定に関するオプションのオブジェクトを渡すことができます。

第2引数のオプションの型には、IntersectionObserverInitを指定することができます。

交差した時には、第1引数に設定したコールバック関数が実行されます。

オプションの設定について

    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 1.0,
    };

オプションのキー

内容

例

root

スクロールする要素として指定された要素のこと。nullを指定する場合、ビューポートがルート要素となる。

スクロールできる要素である必要がある。

null

document.querySelector('root')

rootMargin

ルート要素のマージンを指定することができます。

通常のマージンのようにpx、%で指定することができます。

画像のオレンジ枠がマージンとなります。

threshold

ターゲット要素がどの程度の割合でビューポート（ルート要素）に入ったとき、または出たときに通知を受けるかを定義するための値です

1.0で100%、つまり要素が100%表示された時にコールバックを実行

0.5で50%、要素が50%表示された時にコールバックを実行

ReactでのIntersection Observer APIの使い方

useEffectを使ってインスタンス化を実行

useEffect内でIntersection Observerをインスタンス化します。

コールバック関数に依存する処理になるので、依存配列に指定します。

インスタンスメソッドのobserveの引数にターゲット要素を指定することで監視をすることができます。

w  useEffect(() => {
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.05,
    };
    const observer = new IntersectionObserver(callback, options);

    const target = document.querySelector("#target")
    if (target) {
      observer.observe(target)
    }

    return () => observer.disconnect();
  }, [callback])

useEffectフックでreturnを使用すると、コンポーネントのアンマウント時や、依存配列内の値が変更されてエフェクトが再実行される前に、クリーンアップ関数が実行されます。

クリーンアップ関数の実行により、不要なメモリ使用を防ぎ、メモリリークを避けることができます。

インスタンスメソッドのdisconnectで監視を停止することができます。

コールバック関数を設定する

コールバック関数の型はIntersectionObserverCallbackを指定することができます。

第1引数にターゲット要素の状態を取得できる関数が用意されています。

例えば、isIntersectiongは要素が交差しているかどうかがbooleanでわかります。

  const callback: IntersectionObserverCallback = useCallback(
    (entries) => {
        entries.forEach((entry) => {
    // それぞれの項目は、観測された 1 つの対象要素の交差状態の変化を示している。
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
        })
    }
  , [])

コールバック関数の処理でスタイルを動的に変更する等の処理を記載することができます。

さいごに

Intersection Observer APIを使うと

スクロールするたびに関数が実行されずに済む
関数の発火位置とか面倒な計算をしなくて済む

等、元来のスクロール位置を検知してスタイルを変更する方法と比べるとはるかに楽になります。

またパフォーマンスでも有利に働いてくるので、積極的に活用すべきです。

参考

https://ics.media/entry/190902/

https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

ReactでのIntersection Observer APIの使い方を解説

目次