Intersection Observer でQiita風目次｜スクロール連動ハイライトの実装
- 公開日:
- メンテナンス日:
広告
広告
FAQ
- scrollイベントではなくIntersection Observerを使うメリットは何ですか？
- 最大のメリットはパフォーマンスです。scrollイベントはスクロールの度に頻繁に発火するため負荷が高いですが、Intersection Observerはブラウザ側で最適化されたタイミングで「交差した瞬間」だけ通知をくれるため、動作が非常に軽量です。
- 目次のハイライトがズレる、または同時に複数点灯してしまいます。
- それは
threshold（しきい値）やrootMarginの設定が原因かもしれません。特に、見出しの間隔が短い、あるいは見出しが画面上部に来た時に反応させたい場合は、rootMarginを使って判定基準の線を調整するのが有効です。
- 古いブラウザへの対応は必要ですか？
- 2026年現在、主要なブラウザはすべてネイティブ対応しています。IEなどの古いブラウザをサポートする必要がある特殊な案件以外は、ポリフィルなしでそのまま実装して問題ありません。
広告
