Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Intersection observer

IntersectionObserver は交差オブザーバー API のインターフェイスで、対象となる要素と祖先要素または文書の最上位のビューポートとの交差状態（重なり合っている状態）の変化を非同期に監視する方法を提供します。その祖先要素またはビューポートはルートと呼ばれます。

IntersectionObserver が生成されると、ルート内での可視部分の比率を監視するように構成されます。この構成はいったん IntersectionObserver が生成されると変更できませんので、与えられたオブザーバーオブジェクトは可視性の特定の変化を監視する場合にのみ利用できます。しかし、同じオブザーバーで複数の対象要素を監視することができます。

Observer・パフォーマンス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
IntersectionObserver
51
15
55
12.1
51
12.2
delay
実験的

delay は IntersectionObserver インターフェイスの読み取り専用プロパティで、このオブザーバーからの通知間の最小遅延を示します。
74
79
74
disconnect

disconnect() は IntersectionObserver のメソッドで、すべての対象要素について、表示状態の変化を監視しているオブザーバーを停止します。
51
15
55
12.1
51
12.2
IntersectionObserver

IntersectionObserver() コンストラクターは、新しい IntersectionObserver オブジェクトを生成します。
51
15
55
12.1
51
12.2
IntersectionObserver (options root parameter Document)

`options.root` パラメータは `Document` 型にできます
81
81
76
14
81
14
observe

observe() は IntersectionObserver インターフェイスのメソッドで、要素をこの IntersectionObserver によって監視される対象要素に追加します。 各オブザーバーはそれぞれ一連のしきい値と一つのルートを持っていますが、複数の対象要素について可視部分の変化を監視することができます。
51
15
55
12.1
51
12.2
root

root は IntersectionObserver インターフェイスの読み取り専用のプロパティで、オブザーバーの対象となる要素のbounding boxをviewportとして扱う Element または Document を識別します。
51
15
55
12.1
51
12.2
rootMargin

rootMargin は IntersectionObserver インターフェイスの読み取り専用プロパティで、 CSS の margin プロパティと同じような構文の文字列です。
51
15
55
12.1
51
12.2
scrollMargin

scrollMargin は IntersectionObserver インターフェイスの読み取り専用のプロパティで、ルート要素内に含まれるすべてのscroll containerにマージンを追加します。ルート要素自体がスクロールコンテナーの場合も含みます。
120
120
141
26
120
26
takeRecords

takeRecords() は IntersectionObserver インターフェイスのメソッドで、 IntersectionObserverEntry オブジェクトの配列を返します。それぞれのオブジェクトは、前回明示的にこのメソッドが呼び出されるか、暗黙的にオブザーバーのコールバックが自動的に呼び出されて交差状態がチェックされたときから変更されたそれぞれの対象要素を表します。
51
15
55
12.1
51
12.2
thresholds

thresholds は IntersectionObserver インターフェイスの読み取り専用プロパティで、このオブザーバーを IntersectionObserver.IntersectionObserver でインスタンス化したときに指定された交差量のしきい値の一覧を返すものです。
52
15
55
12.1
52
12.2
trackVisibility
実験的

trackVisibility は IntersectionObserver インターフェイスの読み取り専用のプロパティで、オブザーバーが要素の交差に加えてターゲットの可視性も追跡するかどうかを示します。
74
79
74
unobserve

unobserve() は IntersectionObserver インターフェイスのメソッドで、 IntersectionObserver に指定された対象要素の監視を停止するよう指示します。
51
15
55
12.1
51
12.2
IntersectionObserverEntry

IntersectionObserverEntry は交差オブザーバー API のインターフェイスで、遷移の特定の瞬間における対象要素とそのルートコンテナー間の交差状態を表します。
51
15
55
12.1
51
12.2
boundingClientRect

boundingClientRect は IntersectionObserverEntry インターフェイスの読み取り専用のプロパティで、簡単にいえば、対象要素全体を含む最小の矩形を記述した DOMRectReadOnly を返します。
51
15
55
12.1
51
12.2
IntersectionObserverEntry
実験的

IntersectionObserverEntry() コンストラクタは、新しい IntersectionObserverEntry オブジェクトを作成して返します。
15
12.1
12.2
intersectionRatio

intersectionRatio は IntersectionObserverEntry インターフェイスの読み取り専用のプロパティで、対象の要素が現在どの程度見えているかを、ルートの交差比率で 0.0 から 1.0 の間の値で示します。
51
15
55
12.1
51
12.2
intersectionRect

intersectionRect は IntersectionObserverEntry インターフェイスの読み取り専用のプロパティで、 DOMRectReadOnly オブジェクトであり、交差ルート内に現在表示されている対象要素の部分全体を含む、最小の矩形を記述したものです。
51
15
55
12.1
51
12.2
isIntersecting

isIntersecting は IntersectionObserverEntry インターフェイスの読み取り専用のプロパティで、対象要素が交差オブザーバーのルートと交差している場合に true になる論理値です。
58
16
55
12.1
58
12.2
isVisible
実験的
74
79
74
rootBounds

rootBounds は IntersectionObserverEntry インターフェイスの読み取り専用のプロパティで、 DOMRectReadOnly であり、この IntersectionObserverEntry.target のルート耕作系に対応します。指定されていれば、 IntersectionObserver.rootMargin によるオフセットを含みます。
51
15
55
12.1
51
12.2
target

target は IntersectionObserverEntry インターフェイスの読み取り専用プロパティで、交差ルートとの交差量が変化したのがどの対象要素であるかを Element で示します。
51
15
55
12.1
51
12.2
time

time は IntersectionObserverEntry インターフェイスの読み取り専用プロパティで、 DOMHighResTimeStamp であり、文書の作成時刻を基準とする交差状態が発生した時刻を示します。
51
15
55
12.1
51
12.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Windows Insider Preview ビルド 14986 以降で利用可能です。
注釈 1件
実装メモ
  • バージョン96以前では、`options.rootMargin` オプションに空の文字列が渡された場合、コンストラクタは `DOMException` をスローします（バグ1738791を参照）。
注釈 1件
実装メモ
  • `rootMargin` は `<iframe>` では機能しません。
注釈 1件
実装メモ
  • `rootMargin` は `<iframe>` では機能しません。
注釈 1件
実装メモ
  • Windows Insider Preview ビルド 14986 以降で利用可能です。
注釈 1件
実装メモ
  • Windows Insider Preview ビルド 14986 以降で利用可能です。
注釈 1件
削除済み
  • このバージョンで機能が削除されました (79)

基本構文

JAVASCRIPT 
const intersectionObserver = new IntersectionObserver((entries) => {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// start observing
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

実務での使いどころ

  • Intersection observer の活用

    IntersectionObserver は交差オブザーバー API のインターフェイスで、対象となる要素と祖先要素または文書の最上位のビューポートとの交差状態（重なり合っている状態）の変化を非同期に監視する方法を提供します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク