IntersectionObserver：交差は内容を読んだ証拠ではない

IntersectionObserverは要素がviewportや指定rootと交差する状態を非同期で知らせる。画像の遅延読み込みや一覧の追加取得に使えるが、人が内容を読んだ証拠ではない。比較する領域、面積の割合、記録された時点を合わせて通知を解釈する必要がある。

rootが比較する領域を決める

MDNはrootを交差判定の基準要素と説明し、nullならviewportを使う。ページ全体のスクロールと内部の一覧では基準が異なる場合がある。一覧の末尾を観察する前に、どの領域へ入ることを処理開始の条件にするかを決めたい。

rootMarginは計算上のroot境界を広げたり縮めたりする。正の余白で早めに取得を始める設計はできるが、要素へCSSの余白を加えるわけではない。広げた観察領域に入っただけでは画面内の表示も証明しない。読み込み開始と表示計測では設定を分ける必要がある。

たとえば内部一覧の下に監視用の要素を置く場合、ページ全体でなく一覧をrootにするかを決める。画像の取得用に大きな余白を設定すると、画面内へ入る前に要求が始まることがある。これは誤検知ではなく、選んだ計算領域の結果だ。同じ設定で読了数も数えるなら、取得の方針と計測目的が混ざっていないかを確認する。この例は設定の解釈であり、通信完了の速さを保証するものではない。

thresholdは対象の面積に対する割合

W3Cは対象の境界面積がゼロでなければ、交差面積を対象面積で割った値をintersectionRatioと定義する。0.5というthresholdはrootの半分を占める意味ではなく、対象の交差割合だ。大きい対象では画面を埋める部分があっても割合は小さくなり得る。

thresholdは指定した割合を越えたり下回ったりする境界であり、スクロールの各ピクセルに通知するものではない。MDNは観察を開始した時点にもcallbackが呼ばれると説明する。初回の通知を必ず新しい進入と数えず、記録状態と処理済みかを基準に動作を定める。

isIntersectingと割合を別に見る

W3CのisIntersectingはrootとの交差を表し、面積ゼロの境界接触も区別できる。通常の対象で割合がゼロでも、フラグが必ずfalseとは限らない。境界に接する例で両者の違いを確認すると、条件の取り違えを減らせる。

通知は計算時点の状態であり、連続した画面の映像ではない。届く前やcallbackの処理中に配置が変わる可能性もある。記録時刻と処理開始時刻を区別し、遅れた状態を現在の動きとして解釈しないことが大切だ。精密なピクセル衝突や連続アニメーション制御をこの値だけで行うと考えるべきではない。

専門的視点：callbackの処理は短くする

MDNの専門案内はブラウザーが交差監視を管理すると説明する一方、callbackはmain threadで実行されると明記する。アプリの処理すべてを別スレッドへ移す機能ではない。大量のDOM変更や長い計算を入れれば応答性に影響する。

遅延読み込みでは必要な要求を始め、再処理が不要なら対象の観察を終了する方法が実務的だ。追加一覧では要求中の状態と残りの内容も管理する。通知は開始の信号であり、成功処理、重複要求の防止、終了条件はアプリ側の責任となる。

表示と注意を分けて確認する

viewport、内部root、拡大した余白、大きい対象の低い割合を別々に確認すると意味が分かる。初回通知と再進入も分け、対応ブラウザーと処理済み対象の観察終了を確認する。通知回数だけでは設定の意図を検証できない。

基本の幾何学的な交差は、他要素による遮蔽、利用者の注意、読了を証明しない。MDNは重なるピクセルの正確な一覧を得るAPIとも区別する。交差状態で製品条件を表せるかを先に決め、それを越える指標には別の定義と検証を置く必要がある。

出典

• W3C Intersection Observer：割合と交差状態。
• MDN案内：設定とcallback処理。