No Login Data Private Local Save

Intersection Observer Sandbox - Online Visual Threshold

9
0
0
0

Intersection Observer Sandbox

Visualize & debug intersection thresholds, rootMargin, and real-time ratio

Scroll Container (root)
Target
Element
100% 75% 50% 25% 0%
Intersection Ratio 1.000
00.250.50.751
Threshold
[0]
Custom
Click presets to toggle multiple thresholds. Custom: comma-separated values (0–1).
rootMargin
Custom
CSS margin format. Positive = expand, negative = shrink observation area. Dashed box shows adjusted bounds.
Live Data
isIntersecting
TRUE
intersectionRatio
1.000
Target Visible
100%
Thresholds Met
1/1
Event Log
β€”Scroll to trigger observer events...
Observer fires when ratio crosses any threshold.
Understanding Intersection Observer
What is threshold?

Threshold defines at what percentage of target visibility the callback fires. A value of 0 means the callback fires as soon as even one pixel is visible. 1.0 means the callback only fires when 100% of the target is visible. You can pass an array like [0, 0.5, 1] to fire at multiple visibility levels.

What is rootMargin?

rootMargin expands or shrinks the observation area of the root element. A positive margin (e.g., 20px) makes the observer fire earlier β€” before the target actually enters the root. A negative margin (e.g., -20px) delays firing until the target is further inside.

isIntersecting vs intersectionRatio

isIntersecting is true when any part of the target is within the observation area (ratio > 0). intersectionRatio represents the fraction of the target that is visible, ranging from 0.0 to 1.0.

Common Use Cases

πŸ–ΌοΈ Lazy loading images when they scroll into view
πŸ“œ Infinite scroll β€” load more content as user approaches the bottom
πŸ“Š Analytics β€” track when elements become visible to users
🎬 Animations β€” trigger entrance animations on scroll

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.