An interactive demo of the browser's Intersection Observer API. Scroll through the container and watch items react as they enter or leave the visible area. Each box shows a checkmark when it's intersecting and an X when it's not.
- Root Margin
- Expands or shrinks the detection boundary around the scroll container. Positive values trigger intersection earlier (before items are visible), negative values trigger later (items must scroll further in). The dashed outline shows the effective boundary.
- Threshold
- The fraction of an item that must be visible before it counts as intersecting. At 0.1 just a sliver is enough; at 1.0 the entire item must be in view. The amber overlays show where the threshold boundary falls.
- Size
- Controls the dimensions of each item box. Larger items require more scrolling to fully enter or exit the viewport, making threshold effects more noticeable.