Intersection Observer とは？

スクロールのたびに位置を自分で調べ続ける代わりに、ブラウザへ交差の監視を任せる仕組みだよ。通知は非同期だけれど、コールバックのJavaScriptはメインスレッドで動く。重い処理を入れれば画面の動きに影響するので、必ず高速になるとは言えないんだ。

new IntersectionObserver(callback, options)で作り、observe(element)で対象を登録するよ。rootがnullならビューポート、祖先要素を指定すればその領域を基準にできる。監視開始時にも通知が来るので、コールバックでは各entryのisIntersectingやintersectionRatioを確認しよう。

対象のどれだけの面積が交差したら通知するかのしきい値だよ。0.5なら50%をまたぐ変化で通知する。図の画像Bは縦の半分が領域内に入っているので、ほかの切り取りがないこの例では交差率0.5になるんだ。画面の半分を占める、という意味ではないよ。

交差を判定する基準の領域を広げたり狭めたりできるよ。たとえば0px 0px 200px 0pxなら下側を200px広げ、画面に入る前の読み込みのきっかけにできる。200pxだけ書くと上下左右が広がるんだ。実際の開始位置は対象の位置や途中のスクロール領域などにもよるよ。

通常の交差判定だけでは分からないよ。ほかの要素に覆われたり、透明だったりしても、領域としては交差し得る。画像の読み込み開始や無限スクロールのトリガーに使えるけれど、通知を人が見た証拠にはしない。不要になった対象はunobserve、全部ならdisconnectで監視を止められるよ。