前々から気になっていたIntersection Observer APIについて調べてみました。

Intersection Observerとは

Intersection Observerとは表示領域と要素の交差を検出することができるAPIです。

今まではscrollTopやrequestAnimationFrameなどを用いて要素位置を検出して様々な処理を行なっていたのですが、スクロールの管理は過度にイベントが発火してしまうため、間引きなどを行い、パフォーマンスへの影響を極力抑える必要がありました。

Intersection Observerを使用することで要素位置の検出を行い、手軽にイベントの発火などを最小限に抑えることができます。
現在Intersection Observerは、IEとSafariを除くブラウザで利用することが可能です。

参考
Can I use Intersection Observer
https://caniuse.com/#search=IntersectionObserver

Intersection Observer 日本語訳(2017年9月1日付け編集者草案)
https://triple-underscore.github.io/IntersectionObserver-ja.html#dom-intersectionobserver

実装手順

Intersection Observerは下記実装で利用することができます。

//交差を検出したい子要素を取得

let target = document.querySelector('.child');

 //指定できるoption

let options = { 

 //交差の基準となる親要素を指定(初期値はdocument) 

 root: document.querySelector('.parent'),

 //要素を検出したいratioを0-1の間で指定が可能(初期値は0,1のみ)

 threshold: [0,0.5,1], 

 //交差の基準を指定した値で変更(初期値は0) 

 rootMargin: 100px

}

let observer = new intersectionObserver((changes) => {

 //交差を検出した際に呼ばれるコールバック

 console.log(changes[0])

},options);



//指定した要素をobserveに登録する

observer.observe(target);

//指定した要素のobserveを解除する

observer.unobserve(target);

//登録されている全ての要素のobserveを解除する

observer.disconnect();

コールバックで取得できる要素の情報

コールバックで取得できる情報は下記となります。

1. time : コールバックが発火した際のタイムスタンプ
2. rootBounds rootで指定した領域の画面表示上の相対位置
3. boundingClientRect 交差した要素の画面表示上の相対位置
4. intersectionRect 交差している領域の画面表示上の相対位置
5. intersectionRatio 交差した要素が領域に入っている比率
6. target 交差した要素
7. isIntersecting 交差しているかどうか

サンプル

いくつかIntersection Observerを使用して作ってみました。

割り当てられた比率に応じて変更します。

Intersection Observerの特徴

Intersection Observerを使っていくつかサンプルを作ってみたのですが、下記のような特徴がありました。

1. 表示 / 非表示で処理を行う場合の実装がとても楽
2. トグルを実装する際にも状態管理はisIntersectingのbooleanを利用することで行える
3. イベントの間引きを処理を行う必要がない
4. 表示領域と交差させたい要素は必ず親子関係である必要がある
5. パララックスのような表現はthresholdを利用しても実装できない
6. 破棄用の処理も用意されているので非同期での管理がしやすい

いまはまだ利用できないブラウザがあるためすぐに使用することはできませんが、スクロールによるパフォーマンスには悩むことが多いので、今後も最適な方法を探していきたいと思います。