作成日: 2024-4-8
更新日: 2024-4-15
Intersection Observer APIでは、ターゲットとなる要素が指定された要素やビューポートと交差したときにコールバック関数を呼び出すことができます。
Intersection Observer APIにおいて、「指定された要素」のことをルート要素と呼びます。
要素を指定しない場合、ルート要素はビューポートになります。
ビューポートとはユーザから見えている領域のことを指しています。
当ブログのトップページにおけるヘッダーの挙動は、Intersection Observer APIを利用してCSSを変更しています。
これはビューポートがターゲット要素として指定したファーストビュー部分と交差したことをIntersection Observer APIで検知してCSSを変更しています。
コールバック関数はターゲットとなる要素が最初にスクロールで表示されたタイミングと最後にスクロールで表示されたタイミングです。
例えば、当ブログの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%表示された時にコールバックを実行 |
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