IntersectionObserver
IntersectionObserver は交差オブザーバー API のインターフェイスで、対象となる要素と祖先要素または文書の最上位のビューポートとの交差状態の変化を非同期に監視する方法を提供します。祖先要素またはビューポートがルートとして参照されます。
IntersectionObserver が生成されると、ルート内での可視部分の比率を監視するように構成されます。この構成はいったん IntersectionObserver が生成されると変更できませんので、与えられた監視オブジェクトは可視性の面における特定の変化を監視する場合にのみ有用です。しかし、同じオブザーバーで複数の対象要素を監視することができます。
コンストラクター
IntersectionObserver()-
対象の要素の可視性が 1 つまたは複数の閾値を通過したことを検出したときに、指定されたコールバック関数を実行する新しい
IntersectionObserverオブジェクトを生成します。
プロパティ
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が特定の要素の監視を停止するよう命じます。
例
js
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 |
ブラウザーの互換性
BCD tables only load in the browser