IntersectionObserverメモ | Private Journal

スクロール連動のUIを作るとき、処理は短くても意図は意外と散らばる。
まずは「監視対象」「しきい値」「コールバックの責務」を分けてメモしておくと、後で読み返した時に速い。

💡 IntersectionObserverEntryについて

IntersectionObserverEntry は監視対象の現在状態をまとめたデータです。交差しているか、どのくらい見えているかをコールバックで受け取れます。

「entries で渡される状態のスナップショット」と覚えると実装時に迷いづらくなります。

実装時の分割

監視開始と描画更新を同じ関数に寄せると、分岐が増えた時に読みづらくなる。
observer の管理関数と、表示状態を更新する関数を分けるのがおすすめ。

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    entry.target.classList.toggle('is-visible', entry.isIntersecting);
  }
}, { threshold: 0.35 });

🧭 小さな運用ルール

初期表示で必ず見える要素には observer を使わず、静的にクラスを付ける。監視対象は「後から見える要素」に限定するとパフォーマンスの予測が楽です。

静かなUIプレビュー

⚠️ よくある落とし穴

しきい値を細かく刻みすぎると、不要なコールバックが増えます。まずは 0, 0.35, 1 のように粗く始めるほうが安定します。