IntersectionObserverEntry

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 result of calling Element.getBoundingClientRect() on the target as a DOMRectReadOnly.
IntersectionObserverEntry.intersectionRatio Read only
Returns the ratio of the intersectionRect to the boundingClientRect.
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 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 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 DOMHightResTimeStamp indicating the time at which the intersection was recorded, relative to the IntersectionObserver's "time origin" in DOMHighResTimeStamp.

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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 51.0 (Yes)[1] 55 (55)[2][3] No support ? ?
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 51.0 (Yes)[1] 55.0 (55)[2][3] No support No support ? ? 51.0

[1] This feature is available since the Windows Insider Preview Build 14986.

[2] This feature has been implemented since Firefox 53 behind the preference dom.IntersectionObserver.enabled, which was false by default. Enabled by default beginning in Firefox 55. See bug 1243846.

[3] Currently, Firefox sets rootBounds to null when the target element doesn't intersect with the root, but it should be set to an empty rectangle. See bug 1358668 for status on this issue.

Document Tags and Contributors

 Contributors to this page: Sheppy, stefanjudis, erikadoyle, jpmedley, bunnybooboo, pyoor, Sebastianz
 Last updated by: Sheppy,