IntersectionObserver.observe()

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

IntersectionObserver の observe() メソッドは、要素を IntersectionObserver によって監視される対象要素に追加します。各オブザーバーはそれぞれ個別の閾値とルートを持っていますが、複数の対象要素について可視部分の変化を監視できます。要素の監視を停止するには、IntersectionObserver.unobserve() を呼び出します。

指定された要素の可視部分がオブザーバーの可視量の閾値を通過したとき (IntersectionObserver.thresholds を参照)、オブザーバーのコールバックが実行されます。このコールバックは、発生した交差の変化を表す IntersectionObserverEntry オブジェクトの配列を受け取ります。この構成によって、１回のコールバック呼び出しにつき複数の要素の交差状態の変化を処理することができます。

構文

IntersectionObserver.observe(targetElement);

パラメーター

targetElement
可視部分がルート内に収まっているかどうかが監視される要素。この要素はルート要素の子要素でなければなりません (ルートが文書のビューポートである場合、要素が現在の文書内に含まれている必要があります)。

戻り値

undefined。

例

<<<...>>>

仕様

仕様書 策定状況 コメント
Intersection Observer
IntersectionObserver.observe() の定義		 草案 初期定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
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

凡例

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

関連情報