IntersectionObserver
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.
* Some parts of this feature may have varying levels of support.
IntersectionObserver は交差オブザーバー API のインターフェイスで、対象となる要素と祖先要素または文書の最上位のビューポートとがの交差状態（重なり合っている状態）の変化を非同期に監視する方法を提供します。その祖先要素またはビューポートはルートと呼ばれます。
IntersectionObserver が生成されると、ルート内での可視部分の比率を監視するように構成されます。この構成はいったん IntersectionObserver が生成されると変更できませんので、与えられたオブザーバーオブジェクトは可視性の特定の変化を監視する場合にのみ利用できます。しかし、同じオブザーバーで複数の対象要素を監視することができます。
コンストラクター
IntersectionObserver()-
新しい
IntersectionObserverオブジェクトを生成します。これは対象の要素の可視性が 1 つまたは複数の閾値を通過したことを検出したときに、指定されたコールバック関数を実行します。
プロパティ
IntersectionObserver.root読取専用-
ElementまたはDocumentであり、この外接矩形が交差を検査するときに外接ボックスとして使用されます。rootの値がコンストラクターに渡されなかったり、nullが渡されたりした場合は、最上位の文書のビューポートが使用されます。 IntersectionObserver.rootMargin読取専用-
交差状態を計算するときにルートの外接ボックスに適用されるオフセットの矩形で、計算に使用するルートの矩形を縮小または拡大させます。このプロパティから返される値は、内部的な要件に合わせて変化するので、コンストラクターを呼び出したときに指定したものと同じにならないことがあります。それぞれのオフセットはピクセル数 (
px) またはパーセント値 (%) で表すことができます。既定値は "0px 0px 0px 0px" です。 IntersectionObserver.thresholds読取専用-
閾値のリストで、交差領域と監視対象の外接ボックス領域との比を昇順に並べます。あるターゲットの閾値を超えると、そのターゲットに対する通知が生成されます。コンストラクターに値が渡されなかった場合、 0 が使用されます。
メソッド
IntersectionObserver.disconnect()-
IntersectionObserverオブジェクトによる対象の監視を停止します。 IntersectionObserver.observe()-
IntersectionObserverに対象の要素を監視するよう指示します。 IntersectionObserver.takeRecords()-
監視対象すべての
IntersectionObserverEntryオブジェクトの配列を返します。 IntersectionObserver.unobserve()-
IntersectionObserverが特定の要素の監視を停止するよう指示します。
例
const intersectionObserver = new IntersectionObserver((entries) => {
// intersectionRatio が 0 の場合、対象がビューの外にあるので、
// 何かをする必要はありません。
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log("Loaded new items");
});
// 監視を開始
intersectionObserver.observe(document.querySelector(".scrollerFooter"));
仕様書
| Specification |
|---|
| Intersection Observer # intersection-observer-interface |