IntersectionObserver API properties

Yesterday, we looked at how to detect when an element enters or leaves the viewport. Today, we’re going to learn about some of the details you can get about those elements from the IntersectionObserverEntry object.

Let’s dig in!

IntersectionObserverEntry.target

The IntersectionObserverEntry.target property returns the observed element. This is useful if you plan to manipulate the element (adding or removing classes, toggling animations, and so on) when it enters or leaves the viewport.

let observer = new IntersectionObserver(function (entries, observer) {
	for (let entry of entries) {
		console.log(entry.target);
	}
});

IntersectionObserverEntry.isIntersecting

The IntersectionObserverEntry.isIntersecting property returns a boolean: true if the element is in the viewport, and false if it’s not.

let observer = new IntersectionObserver(function (entries, observer) {
	for (let entry of entries) {
		console.log(entry.isIntersecting);
	}
});

IntersectionObserverEntry.boundingClientRect

The IntersectionObserverEntry.boundingClientRect property returns a DOMRect object, with details about the element’s size and position in the viewport. All measurements are in pixels.

• top/y - The distance from the top of the element to the top of the viewport.
• bottom - The distance from the bottom of the element to the top of the viewport.
• left/x - The distance from the left side of the element to the left side of the viewport.
• right - The distance from the right side of the element to the left side of the viewport.
• height - The height of the element.
• width - The width of the element.

let observer = new IntersectionObserver(function (entries, observer) {
	for (let entry of entries) {
		console.log(entry.boundingClientRect);
	}
});

IntersectionObserverEntry.rootBounds

The IntersectionObserverEntry.rootBounds property returns a DOMRect object that contains details about the viewport (or other intersecting element).

let observer = new IntersectionObserver(function (entries, observer) {
	for (let entry of entries) {
		console.log(entry.rootBounds);
	}
});

More properties

There are more properties, but these are the ones I find myself reaching for the most.

If you want to learn about everything you can do with the IntersectionObserver API, checkout my JS Short on the topic here.