👁️
Intersection Observer — スクロールイベントなしで要素の可視性を検出
lazy loading、無限スクロール、アニメーショントリガーの高性能実装方法
なぜscrollイベントより良いか
scrollは毎秒数十〜数百回発火。毎回getBoundingClientRect()呼び出しでreflow発生。
Intersection Observer：ブラウザ最適化タイミング、reflowなし、requestAnimationFrameより効率的。
オプション
rootMargin: '100px'でビューポート下100pxまで事前検出 — lazy loadingの「スクロール前にロード開始」に。
実戦パターン
画像lazy loading、無限スクロール（最後のアイテムをobserve→次ページロード）、スクロールアニメーション（表示開始でfade-in）。
キーポイント
1
new IntersectionObserver(callback, options)でオブザーバー生成
2
observer.observe(element)で監視対象登録
3
entry.isIntersectingでビューポート進入確認
4
rootMarginで検出領域拡張 — 事前ロード/アニメーション開始
ユースケース
画像lazy loading — ビューポートに近づいたらsrcを設定
無限スクロール — 最後のアイテムが見えたら次ページfetch