IntersectionObserver

Intersection Observer APIIntersectionObserver インターフェイスは、対象の要素と祖先要素または文書の最上位のビューポートとの交差状態の変化を非同期に監視する方法を提供します。祖先要素またはビューポートがルートとして参照されます。

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

コンストラクター

IntersectionObserver.IntersectionObserver()
対象の要素の可視性が1つまたは複数の閾値を通過したことを検出したときに、指定されたコールバック関数を実行する新しい IntersectionObserver オブジェクトを生成します。

プロパティ

IntersectionObserver.root 読取専用
指定された、監視対象となる element の祖先です。コンストラクターに値が渡されなかった場合はこの値が null となり、最上位の文書のビューポートが使用されます。
IntersectionObserver.rootMargin 読取専用
交差状態を計算するときに root の バウンディングボックス に適用されるオフセットの矩形で、計算のために root を効果的に縮小または拡大させます。このプロパティから返る値は、内部的な要件に合わせて変化するので、コンストラクターを呼び出したときに指定したものと同じにならないことがあります。それぞれのオフセットはピクセル数 (px) またはパーセント値 (%) で表すことができます。既定値は "0px 0px 0px 0px" です。
IntersectionObserver.thresholds 読取専用
交差領域と監視対象のバウンディングボックス領域との比の閾値を昇順に並べたリストです。対象の通知は、対象においていずれかの閾値を通過した場合に生成されます。コンストラクターで値が渡されなければ、 0 が使用されます。

メソッド

IntersectionObserver.disconnect()
IntersectionObserver オブジェクトが対象を監視することを停止します。
IntersectionObserver.observe()
IntersectionObserver が対象の要素を監視するよう命じます。
IntersectionObserver.takeRecords()
監視対象すべての IntersectionObserverEntry オブジェクトの配列を返し、すべての監視を停止します。
IntersectionObserver.unobserve()
IntersectionObserver が特定の要素の監視を停止するよう命じます。

var intersectionObserver = new IntersectionObserver(function(entries) {
  // intersectionRatio が 0 の場合、対象がビューの外にあるので、
  // 何かをする必要はありません。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// 監視を開始
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

仕様書

仕様書 状態 備考
Intersection Observer 草案

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
IntersectionObserver
実験的
Chrome 完全対応 51Edge 完全対応 15Firefox 完全対応 55
完全対応 55
未対応 53 — 55
無効
無効 From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 12.1WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0
IntersectionObserver() constructor
実験的
Chrome 完全対応 51Edge 完全対応 15Firefox 完全対応 55
完全対応 55
未対応 53 — 55
無効
無効 From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera ? Safari 完全対応 12.1WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0
disconnect
実験的
Chrome 完全対応 51Edge 完全対応 15
補足
完全対応 15
補足
補足 Available since Windows Insider Preview Build 14986
Firefox 完全対応 55
完全対応 55
未対応 53 — 55
無効
無効 From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
observe
実験的
Chrome 完全対応 51Edge 完全対応 15Firefox 完全対応 55
完全対応 55
未対応 53 — 55
無効
無効 From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 12.1WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0
root
実験的
Chrome 完全対応 51Edge 完全対応 15Firefox 完全対応 55
完全対応 55
未対応 53 — 55
無効
無効 From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 12.1WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0
rootMargin
実験的
Chrome 完全対応 51Edge 完全対応 15Firefox 完全対応 55
完全対応 55
未対応 53 — 55
無効
無効 From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 12.1
補足
完全対応 12.1
補足
補足 rootMargin does not work with <iframe>s.
WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS 完全対応 12.2
補足
完全対応 12.2
補足
補足 rootMargin does not work with <iframe>s.
Samsung Internet Android 完全対応 5.0
takeRecords
実験的
Chrome 完全対応 51Edge 完全対応 15
補足
完全対応 15
補足
補足 Available since Windows Insider Preview Build 14986
Firefox 完全対応 55
完全対応 55
未対応 53 — 55
無効
無効 From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
thresholds
実験的
Chrome 完全対応 51Edge 完全対応 15Firefox 完全対応 55
完全対応 55
未対応 53 — 55
無効
無効 From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 12.1WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0
unobserve
実験的
Chrome 完全対応 51Edge 完全対応 15
補足
完全対応 15
補足
補足 Available since Windows Insider Preview Build 14986
Firefox 完全対応 55
完全対応 55
未対応 53 — 55
無効
無効 From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 12.1WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。