Intersection Observer v2: インタラクティブ可視性トラッカー

Intersection Observer v2は、要素がビューポートと交差するタイミングだけでなく、ユーザーに実際に見えているかどうかを検出する強力な新機能を導入しました。これは、オーバーレイ、固定ヘッダー、その他のUIコンポーネントなどによってコンテンツが隠されている場合の検出に不可欠です。

v2の主要な革新は、ターゲット要素がユーザーに見えているかどうかを追跡できるtrackVisibilityオプションです。これをdelayオプションと組み合わせることで、短時間の可視性の変化が誤検知を引き起こさないようにすることができます。

このデモでは、赤いオーバーレイをターゲット要素の上にドラッグして、Intersection Observer v2がオクルージョン（遮蔽）をどのように検出するかを確認できます。オーバーレイがターゲットを覆うと、「Is Visible」ステータスが「Yes」から「No」に変わります。これは、ターゲットが技術的にはビューポートと交差しているにもかかわらず起こります。

「Enable trackVisibility」オプションを切り替えて、v1とv2の動作の違いを確認してみてください。trackVisibilityが無効の場合、オブザーバーは交差比率のみを追跡します。有効にすると、実際の可視性も追跡します。

この機能は特に以下の用途に有効です：

• 広告の視認性測定
• コンテンツ可視性分析
• 遅延読み込みの最適化
• アクセシビリティの向上
• ユーザーエンゲージメントの追跡