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().
new IntersectionObserverEntry(intersectionObserverEntryInit)intersectionObserverEntryInitAn object with the following properties, all of which are required:
boundingClientRectAn object specifying the location and dimensions of the target element's bounding rectangle, with x, y, width, and height properties. This corresponds to the rectangle returned by Element.getBoundingClientRect().
intersectionRatioA number representing the ratio of the intersectionRect area to the boundingClientRect area. If the boundingClientRect area is zero, this is 1 if isIntersecting is true, and 0 if not.
intersectionRectAn object specifying the location and dimensions of the target's visible area within the root's intersection rectangle, with x, y, width, and height properties.
isIntersectingA boolean value which is true if the target element intersects with the intersection observer's root, or false otherwise.
isVisibleA boolean value which is true if 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 of false means either that the target has compromised visibility, or that this determination could not be made.
rootBoundsAn object specifying the location and dimensions of the root's intersection rectangle, with x, y, width, and height properties, or null.
targetThe Element whose intersection with the root changed.
timeA DOMHighResTimeStamp indicating the time at which the intersection was recorded, relative to the IntersectionObserver's time origin.
A new IntersectionObserverEntry object whose properties are initialized to the values specified in intersectionObserverEntryInit.
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,
});