v150 · CSS · Scrolling
Nested Scrollers
Three nested scrollable containers — inner inside middle inside outer. overscroll-behavior-chain: none stops scroll momentum from propagating upward when an inner scroller hits its edge. Configure each layer independently and watch the scroll propagation in the event log.
overscroll-behavior-chain per layer
Inner
Middle
Outer
Nested scrollersscroll inside each zone
🔵 Outer container (scroll me)
Outer item 1
Outer item 2
Outer item 3
🟢 Middle container (scroll me)
Middle item 1
Middle item 2
Middle item 3
🟡 Inner container (scroll me)
Inner item 1
Inner item 2
Inner item 3
Inner item 4
Inner item 5
Inner item 6
Inner item 7
Inner item 8
Middle item 4
Middle item 5
Middle item 6
Middle item 7
Middle item 8
Outer item 4
Outer item 5
Outer item 6
Outer item 7
Outer item 8
Outer item 9
Outer item 10
// Scroll inside the containers — the event log shows propagation…
With all layers set to "contain", each container absorbs scroll at its edge and does not propagate to its parent. Set inner to "auto" and scroll past the inner edge — the middle container starts scrolling.
/* "contain" = scroll stays in this scroller, never propagates up */
.inner { overscroll-behavior-y: contain; }
.middle { overscroll-behavior-y: contain; }
.outer { overscroll-behavior-y: contain; }
/* "auto" = allow chaining to parent when inner hits edge */
.inner { overscroll-behavior-y: auto; }
/* "none" = no chain AND no native overscroll effect (e.g. pull-to-refresh) */
.inner { overscroll-behavior-y: none; }
see also
- Scroll Chaining Explorer — visual chain diagram
- Bottom Sheet — mobile-style sheet with contain
- Reader Layout — article with contained sidebar
- Side Menu Pattern — drawer with overscroll none
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗