Visible Rect Demo

This demo shows how the visibleRectEffect API tracks the visible portion of an element with two different visibility ratios:
• Document Visibility: How much of the element is visible in the browser viewport
• Scroll Container Visibility: How much of the element is visible within its scrollable parent
Instructions: Scroll the page and watch how both ratios change. In custom container mode, notice how scroll container visibility can be 100% while document visibility is 0%.

Scrollable Container

Current: Document scrolling
Scroll: 0px

Visible Rect API Data

Visible Rect:
No data
Element Full Size:
No data
Document Visibility:
No data
Scroll Container Visibility:
No data
Visibility Status:
No data

Scrollable Content Area

Content above the target element

Left Content

This is some content on the left side of the target element. It helps demonstrate how the overlay system works when the target is part of a more complex layout.

Additional content to make this section taller.

Target Element

Right Content

This is content on the right side of the target element. The flexbox layout ensures proper alignment while maintaining the overlay functionality.

More content to balance the layout.

Content below target element