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 が特定の要素の監視を停止するよう指示します。

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
IntersectionObserver
IntersectionObserver() constructor
options.root parameter can be a Document
delay
Experimental
disconnect
observe
root
rootMargin
scrollMargin
Experimental
takeRecords
thresholds
trackVisibility
Experimental
unobserve

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

関連情報