overscroll-behavior: chain

concepts

1. Scroll Chaining Explorer

   An interactive demo with nested scrolling containers. Toggle between auto, contain, and chain to see how each value affects scroll propagation when the inner scroller hits its boundary. Scroll the inner box past its end and watch whether the outer page moves.

2. Side Menu Pattern

   The canonical use case for chain: a slide-in drawer implemented as a scrollable container. With chain, reaching the top or bottom of the drawer menu passes scroll events to the page behind — with none or contain, those events are trapped inside the drawer.

3. Reader Layout

   An article reader with a fixed-height content panel. overscroll-behavior: chain passes scroll through to the page when the article is fully scrolled — the outer page continues scrolling past the comments section. Toggle between contain and chain to see the difference.

4. Bottom Sheet

   A maps-style bottom sheet with a scrollable list positioned over a page. Toggle between all three values — auto, contain, and chain — and scroll the list past its top item to see exactly how each value handles the boundary handoff.

5. Nested Scrollers

   Three nested scrollable containers (inner → middle → outer) with independently configurable overscroll-behavior-y values. Set each layer to contain, auto, or none using the controls and scroll inside each zone — the event log shows exactly which container absorbs the scroll and which propagates it upward.

6. Compatibility Lab

   Probes all four overscroll-behavior values with CSS.supports(), runs a live scroll-chaining test to detect whether chain is honoured by this browser, and shows the JavaScript wheel-event fallback for browsers that don't yet support it.

7. Value Comparison Matrix

   All four values — auto, chain, contain, none — side by side, each with a live inner scroller nested inside an outer scroller. Scroll to the boundary on each card to see exactly how chaining and overscroll effects differ across all four values.

why it shipped

The original overscroll-behavior values — auto and contain — leave a gap. auto both chains the scroll and shows overscroll effects like the Android glow or iOS rubber-band stretch. contain suppresses both chaining and local effects. There was no way to say "chain the scroll but suppress the overscroll effect." The chain value fills that gap: it propagates the scroll to the ancestor but does not trigger any overscroll animation on the element itself. This is especially useful for overlay panels, sidebars, or drawers that should behave seamlessly with page scroll while avoiding jarring stretch animations.

references

• ChromeStatus entry
• MDN — overscroll-behavior
• CSS Overscroll Behavior spec
• Chrome 150 release notes