IntersectionObserver API and Thresholds
Create observers and configure visibility thresholds.
What IntersectionObserver Does
IntersectionObserver fires callbacks when an element enters or leaves the viewport (or another scroll container). It is the modern, performant alternative to scroll listeners — the browser does the math, your code only runs on actual visibility transitions.
Construction
new IntersectionObserver(callback, options) creates an observer. The callback receives an array of entries when intersections change; options control which container is observed and at what thresholds.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
console.log("Visible:", entry.target);
}
}
});
observer.observe(document.querySelector(".hero"));All lessons in this course
- IntersectionObserver API and Thresholds
- Lazy Loading with IntersectionObserver
- Infinite Scroll Implementation
- Scroll-Linked Animations Setup