IntersectionObserver API and Thresholds

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.

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.

Each entry has target (the observed element), isIntersecting (boolean), intersectionRatio (0 to 1), boundingClientRect, intersectionRect, and time. Use isIntersecting for binary visibility checks; intersectionRatio for percent-visible logic.

{ threshold: 0.5 } fires the callback whenever the intersection ratio crosses 50%. Use an array [0, 0.25, 0.5, 0.75, 1] to fire at every quarter — useful for building progress indicators or analytics that report "% visible".

By default, the observer measures intersection with the viewport. Set root: someScrollableDiv to measure against an inner scroll container — for example, a virtualized list inside a fixed-height div.

rootMargin: "200px" grows the observation area by 200 pixels on every side. Use it to fire earlier (start loading images 200px before they enter the viewport) or later (only fire when fully past the viewport).

observer.observe(element) starts watching an element; observer.unobserve(element) stops. Always unobserve when you no longer need the callback (e.g., after lazy-loading triggers once) to free memory.

observer.disconnect() stops watching all observed elements. Call when the component is unmounted or the observer is no longer needed — prevents leaks from observers that outlive their use case.

Callbacks are delivered asynchronously and batched — many intersection changes during a fast scroll fire one callback with all entries, not one per element. This is a major performance win over scroll listeners that fire on every scroll event.

When you observe a new element, the callback fires once almost immediately with the current state — useful for handling elements that are already visible at the time observation begins, without a special initialization path.

Lazy-loading images, triggering animations on scroll into view, infinite scrolling (observe a sentinel near the list end), tracking which articles a user has actually read, sticky-header toggling based on hero visibility.

What is the difference between threshold: 0 and threshold: 1 in an IntersectionObserver?

IntersectionObserver fires callbacks on element visibility transitions with built-in performance and batching — replace scroll listeners with it for visibility logic. Configure with threshold (0 to 1, or array), root (custom scroll container), and rootMargin (grow/shrink observed area). observe/unobserve specific elements; disconnect cleans up everything.