Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる

Post on:2017年8月10日

「IntersectionObserver()」の基本的な動作

さっそく、IntersectionObserver APIの最も基本的な動作を見てみましょう。
まずは、簡単なJavaScriptです。

let observer = new IntersectionObserver(handler);
observer.observe(Target); // <-- この要素を監視

1 2	let observer = new IntersectionObserver(handler); observer.observe(Target); // <-- この要素を監視

下記のデモで、その動作が確認できます。
スクロールして、ターゲットがビューポートに表示されている間はTrueを返します。

1つのObserver（監視者）で多くのターゲット要素を同時に監視することができます。その際は、各ターゲットに対してobserver.observe()を繰り返すだけです。
上記の対象はビューポートですが、div要素など特定のコンテナにすることもできます。

可視の判定をしていると思いましたか？

IntersectionObserversはデフォルトで、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる（または交差する「Intersection」）量を計算します。

ターゲットがビューポートに交差したかを監視

しかし、Observerは実際の画面上の可視性に関係なく、要素が任意の親要素とどれだけ交差するかを監視することができます。これはdiv要素のコンテナ内で無限スクロールするリストのように、コンテンツをロードするウィジェットに有用です。このような場合、ウィジェットはIntersectionObserversを使用して、コンテナを満たすのに十分なコンテンツをロードすることができます。

分かりやすくするために、ここでは「可視」という用語を使用しますが、IntersectionObserversは文字通りの可視性に限定されないことを覚えておいてください。

ハンドラの基本

ハンドラは、2つの引数を受け取るコールバックです。

IntersectionObserverEntryオブジェクトのリスト、各オブジェクトにはハンドラの最後の呼び出し以降にターゲットの交差がどのように変化されたか、それぞれメタデータが含まれています。
Observer自体への参照。

Observerはデフォルトでブラウザのビューポートを監視しています。つまり、上記のデモでは、isIntersectingプロパティを調べて、ターゲット要素の一部が表示可能かどうかを判断する必要があります。

デフォルトでは、ハンドラはターゲット要素が完全にオフスクリーンから部分的に可視になるか、またはその逆に移行する瞬間にのみ実行されますが、部分的に可視の要素と完全に可視の要素を区別したい場合はどうなるでしょうか？

しきい値「threshold」の出番です！

更に使いこなすためのオプション

ハンドラのコールバックに加えて、IntersectionObserverコンストラクタはいくつかのオプションが用意されています。このオプションの1つに、ハンドラを呼び出すためのブレークポイントを定義するしきい値「threshold」があります。

let observer = new IntersectionObserver(handler, {
    threshold: 0 // <-- これがデフォルトです
});

let observer = new IntersectionObserver(handler, {

threshold: 0 // <-- これがデフォルトです

});

デフォルトの値は0で、ターゲットが部分的に表示されるか完全に非表示されるたびにハンドラを呼び出します。thresholdに1を設定すると、ターゲットが完全に可視と部分可視の間で反転するたびにハンドラが呼び出され、ターゲットがいずれかの方向に50％の可視性のポイントを通過すると0.5に設定されます。

下記のデモのように「threshold: [0, 1]」と配列にすることもできます。

ターゲットをゆっくりとスクロールしてビューポートに出し入れして、その動作を見てみてください。

ターゲットが完全に表示されはじめ、その時intersectionRatioは1です、そこから更にスクロールすると2回変化します。正確な値は環境により異なりますが、1回目は0.87、その後は0です。ターゲットがビューポートにスクロールバックされると、intersectionRatioは0.05に変わり、その後は1に変わります。0と1は理にかなっていますが、追加の値はどこから来ているのでしょうか？また、0と1の間の他の数字はどうなっていると思いますか？

しきい値はトランジションに関して定義されます。ハンドラは、ターゲットのintersectionRatioがしきい値の1つを超えて拡大・縮小したときをブラウザが認識するたびに通知します。しきい値を[0, 1]にすると、ターゲットが非可視のライン（0）と可視のライン（1）を横切るたびにブラウザに通知され、3つの状態が効果的に定義されます。3つの状態とは、完全に可視、部分的に可視、可視ではない。です。

intersectionRatioの観測値は、ブラウザがアイドルである瞬間を待ってから交差点を確認し報告する必要があるため、テストごとに異なります。これらの計算はスクロールやユーザーの入力よりも低い優先度で、バックグラウンドで行われます。

デモは編集が可能なので、しきい値を追加または削除してみてください。そして、ハンドラがいつどこで実行されるかを確認してみてください。