IntersectionObserverEntry

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

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

Intersection Observer APIIntersectionObserverEntry インターフェイスは、特定の遷移時点でのターゲット要素とそのルートコンテナ間の共通部分を記述します。 IntersectionObserverEntry のインスタンスは、その entries パラメータで IntersectionObserver コールバックに渡されます。それ以外の場合、これらのオブジェクトは IntersectionObserver.takeRecords() を呼び出すことによってのみ取得できます。

プロパティ

IntersectionObserverEntry.boundingClientRect 読取専用
Returns the bounds rectangle of the target element as a DOMRectReadOnly. The bounds are computed as described in the documentation for Element.getBoundingClientRect().
IntersectionObserverEntry.intersectionRatio 読取専用
Returns the ratio of the intersectionRect to the boundingClientRect.
IntersectionObserverEntry.intersectionRect 読取専用
Returns a DOMRectReadOnly representing the target's visible area.
IntersectionObserverEntry.isIntersecting 読取専用
A Boolean value which is true if the target element intersects with the intersection observer's root. If this is true, then, the IntersectionObserverEntry describes a transition into a state of intersection; if it's false, then you know the transition is from intersecting to not-intersecting.
IntersectionObserverEntry.rootBounds 読取専用
Returns a DOMRectReadOnly for the intersection observer's root.
IntersectionObserverEntry.target 読取専用
The Element whose intersection with the root changed.
IntersectionObserverEntry.time 読取専用
A DOMHighResTimeStamp indicating the time at which the intersection was recorded, relative to the IntersectionObserver's time origin.

メソッド

このインタフェースにはメソッドがありません。

仕様

仕様書 ステータス コメント
Intersection Observer
IntersectionObserverEntry の定義
草案 初回定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
IntersectionObserverEntry
実験的
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 ? WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
boundingClientRect
実験的
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 ? WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
intersectionRatio
実験的
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 ? WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
intersectionRect
実験的
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 ? WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
isIntersecting
実験的
Chrome 完全対応 51Edge 完全対応 16Firefox 完全対応 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
rootBounds
実験的
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 ? WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
target
実験的
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 ? WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
time
実験的
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 ? WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0

凡例

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