IntersectionObserverEntry: IntersectionObserverEntry() constructor
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The IntersectionObserverEntry() constructor creates and returns a new IntersectionObserverEntry object.
Note:
In typical usage, you don't need to call this constructor yourself. IntersectionObserverEntry objects are created automatically by the browser and delivered to the IntersectionObserver callback when an intersection is observed, or returned by IntersectionObserver.takeRecords().
Syntax
new IntersectionObserverEntry(intersectionObserverEntryInit)
Parameters
intersectionObserverEntryInit-
An object with the following properties, all of which are required:
boundingClientRect-
An object specifying the location and dimensions of the target element's bounding rectangle, with
x,y,width, andheightproperties. This corresponds to the rectangle returned byElement.getBoundingClientRect(). intersectionRatio-
A number representing the ratio of the
intersectionRectarea to theboundingClientRectarea. If theboundingClientRectarea is zero, this is 1 ifisIntersectingistrue, and 0 if not. intersectionRect-
An object specifying the location and dimensions of the target's visible area within the root's intersection rectangle, with
x,y,width, andheightproperties. isIntersecting-
A boolean value which is
trueif the target element intersects with the intersection observer's root, orfalseotherwise. isVisible-
A boolean value which is
trueif the target element has been determined to be fully visible and unoccluded, with no visual effects that would alter its display on screen. A value offalsemeans either that the target has compromised visibility, or that this determination could not be made. rootBounds-
An object specifying the location and dimensions of the root's intersection rectangle, with
x,y,width, andheightproperties, ornull. target-
The
Elementwhose intersection with the root changed. time-
A
DOMHighResTimeStampindicating the time at which the intersection was recorded, relative to theIntersectionObserver's time origin.
Return value
A new IntersectionObserverEntry object whose properties are initialized to the values specified in intersectionObserverEntryInit.
Examples
Creating an IntersectionObserverEntry
This example creates a basic IntersectionObserverEntry describing a fully visible element. While you can construct an entry manually like this, in practice these objects are created by the browser and passed to your IntersectionObserver callback automatically.
const entry = new IntersectionObserverEntry({
time: performance.now(),
rootBounds: { x: 0, y: 0, width: 1024, height: 768 },
boundingClientRect: { x: 10, y: 20, width: 200, height: 100 },
intersectionRect: { x: 10, y: 20, width: 200, height: 100 },
isIntersecting: true,
isVisible: false,
intersectionRatio: 1.0,
target: document.body,
});
Specifications
| Specification |
|---|
| Intersection Observer # dom-intersectionobserverentry-intersectionobserverentry |