IntersectionObserver API を使うと「お、この要素見える位置に入ってきたな」と分かったときに好きな処理を行えます。
これを使うにはまずインスタンスを作ります。
const observer = IntersectionObserver(callback, {/* ... */});
ここで渡したcallback
は(デフォルトで)ブラウザ画面に要素が入ってきたり、出ていったとこに発火されるコールバック関数です。この関数は引数にIntersectionObserverEntry
の配列を渡してきます。この値は出たり入ったりした要素と様々なコンテキストを持ったオブジェクトです。
例えばintersectionRatio
はコンテキストの1つで、0-1
の間(小数点含む)の値で対象の要素は今どれだけ可視領域に入ってるのかが分かります。これは0
だとすべて見えてない、1
だとすべて見えてるという意味になるからです。
設定
先程デフォルトでと書きましたが、どの要素を基準に出たり入ったりを監視するかは変えることができます。これにはIntersectionObserver
の第2引数を使います。第2引数には基準を変える以外の要素も持っています。
root
root
が要素の基準になるものです。これはデフォルトではブラウザのビューポートになってますが、
{
root: document.getElementById('container')
}
とすると、そのobserver
で監視した要素は#container
から出たり入ったりした時にコールバックが走るようになります。
rootMargin
rootMargin
はroot
要素の領域を拡大・縮小化できます。例えばrootMargin: '50px 50px 50px 50px'
とした場合、要素の見た目は変わりませんが、上右下左側に50px
余分に自分の可視領域だと見なすことができます。つまり、observe
している要素が表示領域まで達するのに実際はあと50px
あったとしてもコールバック関数が発火します。
この値を例えば-50px
とすると逆の意味になります。-50px
と設定されていると実際に見えるようになった領域から更に50px
スクロールしなければコールバックが発火しなくなります。
このオプションはデフォルトで0px 0px 0px 0px
が設定されてます。
threshold
threshold
はどれくらいの頻度でコールバックを呼び出すかを設定します。デフォルトでは0
が設定されてます。これは(rootMargin
がすべて0
の状態で)1px
でも被った時コールバック関数を実行するということになります。
この値を0.5
に変えると要素が半分見えた時にコールバック関数が発火するようになり、1
だとすべて見えた時…という具合になります。
この値は配列でも設定することができ、[0, 0.5, 1]
と設定すれば、入る時は
1px
でも見えた時半分見えた時
全部見えた時
出る時は
全部見えなくなった時
半分見えなくなった時
まったく見えなくなった時
という具合でコールバック関数が呼ばれるようになります。
要素の監視
監視を始めるにはIntersectionObserver#observe
を呼びます。この引数には監視対象となる要素を渡します。
observer.observe(element);
監視の必要が無ければ解除しましょう。それにはIntersectionObserver#unobserve
またはIntersectionObserver#disconnect
を使います。前者は要素1つに関して監視を解除するメソッドですが、後者はそのオブザーバーの監視対象すべてについて解除します。
observer.observe(element);
observer.disconnect();