IntersectionObserverEntry

IntersectionObserverEntry interface of the 交集观测器 API describes the intersection between the target element and its root container at a specific moment of transition. Instances of IntersectionObserverEntry are delivered to an IntersectionObserver callback in its entries parameter; otherwise, these objects can only be obtained by calling 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 boundingClientRect .
IntersectionObserverEntry.intersectionRect 只读
返回 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 只读
返回 DOMRectReadOnly for the intersection observer's root.
IntersectionObserverEntry.target 只读
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 .

方法

This interface has no methods.

规范

规范 状态 Comment
Intersection Observer
The definition of 'IntersectionObserverEntry' in that specification.
工作草案 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
IntersectionObserverEntry
Chrome 51 Edge 15 Firefox 55
55
不支持 53 — 55
Disabled
Disabled 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 No Opera Yes Safari 12.1 WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0
boundingClientRect
Chrome 51 Edge 15 Firefox 55
55
不支持 53 — 55
Disabled
Disabled 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 No Opera Yes Safari ? WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0
intersectionRatio
Chrome 51 Edge 15 Firefox 55
55
不支持 53 — 55
Disabled
Disabled 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 No Opera Yes Safari ? WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0
intersectionRect
Chrome 51 Edge 15 Firefox 55
55
不支持 53 — 55
Disabled
Disabled 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 No Opera Yes Safari ? WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0
isIntersecting
Chrome 51 Edge 16 Firefox 55
55
不支持 53 — 55
Disabled
Disabled 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 No Opera Yes Safari 12.1 WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0
rootBounds
Chrome 51 Edge 15 Firefox 55
55
不支持 53 — 55
Disabled
Disabled 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 No Opera Yes Safari ? WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0
target
Chrome 51 Edge 15 Firefox 55
55
不支持 53 — 55
Disabled
Disabled 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 No Opera Yes Safari ? WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0
time
Chrome 51 Edge 15 Firefox 55
55
不支持 53 — 55
Disabled
Disabled 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 No Opera Yes Safari ? WebView Android 51 Chrome Android 51 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 5.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。