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.
🥳 Get excited! A new session of the Vanilla JS Academy returns on June 26. Registration opens up on Monday.
Go Make Things | Sciencx (2023-05-31T14:30:00+00:00) IntersectionObserver API properties. Retrieved from https://www.scien.cx/2023/05/31/intersectionobserver-api-properties/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.