Intersection Observer Sandbox - Online Visual Threshold

When you set multiple thresholds (e.g., [0, 0.5, 1]), the observer fires a callback each time the intersection ratio crosses one of those thresholds — either going up (entering) or down (leaving). This is by design and allows you to respond to different levels of visibility.

Yes! A single IntersectionObserver instance can observe multiple target elements. Simply call observer.observe(element) for each element. The callback receives an array of all entries that had an intersection change. This is more efficient than creating separate observers.

Using a positive rootMargin expands the observation area, which may cause the observer to track more elements and fire more callbacks. This has a minor performance cost. Negative margins shrink the area and can slightly improve performance. For most use cases, the impact is negligible — the Intersection Observer API is asynchronous and highly optimized by browsers.

Intersection Observer is supported in all modern browsers (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+). Always disconnect observers when they're no longer needed (observer.disconnect()) to prevent memory leaks. For lazy loading, consider using rootMargin to start loading resources slightly before they become visible.