Loading challenge...
Intersection Observer
Detect element visibility
Observer Controls
Configure the Intersection Observer
Section 1
Section 2
Section 3
Section 4
Section 5
Section 6
Scrollable Container
Scroll to observe elements
Section 1
Section 2
Section 3
Section 4
Section 5
Section 6
Event Log
Recent visibility changes
Scroll the container to see events
Observer Data
Current element dimensions and visibility
| Element | Intersecting | Ratio | Root Bounds |
|---|
Testing Tips
Automation hints
- ✓ Use locator().scrollIntoViewIfNeeded() to trigger intersection
- ✓ Verify visibility with data-visible attribute on indicators
- ✓ Test scroll container with mouse.wheel() or scrollTo() via evaluate
- ✓ Check intersection ratio in observer data table after scrolling
- ✓ Modify threshold slider and verify observer reconfigures
