This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The IntersectionObserverEntry
interface of the Intersection Observer 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()
.
Properties
IntersectionObserverEntry.boundingClientRect
Read only- Returns the bounds rectangle of the target element as a
DOMRectReadOnly
. The bounds are computed as described in the documentation forElement.getBoundingClientRect()
. IntersectionObserverEntry.intersectionRatio
Read only- Returns the ratio of the
intersectionRect
to theboundingClientRect
. IntersectionObserverEntry.intersectionRect
Read only- Returns a
DOMRectReadOnly
representing the target's visible area. IntersectionObserverEntry.isIntersecting
Read only- A Boolean value which is
true
if the target element intersects with the intersection observer's root. If this istrue
, then, theIntersectionObserverEntry
describes a transition into a state of intersection; if it'sfalse
, then you know the transition is from intersecting to not-intersecting. IntersectionObserverEntry.rootBounds
Read only- Returns a
DOMRectReadOnly
for the intersection observer's root. IntersectionObserverEntry.target
Read only- The
Element
whose intersection with the root changed. IntersectionObserverEntry.time
Read only- A
DOMHighResTimeStamp
indicating the time at which the intersection was recorded, relative to theIntersectionObserver
's time origin.
Methods
This interface has no methods.
Specifications
Specification | Status | Comment |
---|---|---|
Intersection Observer The definition of 'IntersectionObserverEntry' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Firefox | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
boundingClientRect | 51 | 53 — 55 55 | 15 | (No) | ? | ? |
intersectionRatio | 51 | 53 — 55 55 | 15 | (No) | ? | ? |
intersectionRect | 51 | 53 — 55 55 | 15 | (No) | ? | ? |
isIntersecting | 51 | 53 — 55 55 | 15 | (No) | ? | ? |
rootBounds | 51 | 53 — 55 55 | 15 | (No) | ? | ? |
target | 51 | 53 — 55 55 | 15 | (No) | ? | ? |
time | 51 | 53 — 55 55 | 15 | (No) | ? | ? |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
boundingClientRect | 51 | 51 | (Yes) | ? | (No) | ? | ? |
intersectionRatio | 51 | 51 | (Yes) | ? | (No) | ? | ? |
intersectionRect | 51 | 51 | (Yes) | ? | (No) | ? | ? |
isIntersecting | 51 | 51 | (Yes) | ? | (No) | ? | ? |
rootBounds | 51 | 51 | (Yes) | ? | (No) | ? | ? |
target | 51 | 51 | (Yes) | ? | (No) | ? | ? |
time | 51 | 51 | (Yes) | ? | (No) | ? | ? |