v150 · CSS · demo

Scroll Chaining Explorer

Toggle between auto, contain, and chain on an inner scrollable container. Scroll the inner box to its top or bottom boundary, then keep scrolling — watch whether the outer container moves and whether overscroll effects fire.

live demo

Outer scrollable area overscroll-behavior: chain
↑ outer content above inner box
outer filler row 1
outer filler row 2
1Inner item one
2Inner item two
3Inner item three
4Inner item four
5Inner item five
6Inner item six
7Inner item seven
8Inner item eight
outer filler row 3
outer filler row 4
outer filler row 5
↓ outer content below inner box
scroll events
Scroll the inner box past its boundary to see events…

value comparison

value chains to ancestor? overscroll effect? use case
auto yes yes Default browser behavior — chains scroll and shows glow/rubber-band.
chain yes no Chains to ancestor but suppresses overscroll animations. Ideal for overlays and drawers.
contain no local only Traps scroll in element, shows local overscroll effect. Good for modal backgrounds.
none no no Traps scroll, no effects. Useful for elements that should never show bounce or glow.

code

/* Before Chrome 150: no way to chain without the overscroll effect */
.inner-panel {
  overflow-y: scroll;
  overscroll-behavior: auto;   /* chains BUT also shows glow/rubber-band */
}

/* Chrome 150+: chain propagates scroll, suppresses overscroll animation */
.inner-panel {
  overflow-y: scroll;
  overscroll-behavior: chain;  /* chains to ancestor, no local overscroll effect */
}

/* Per-axis control also works */
.inner-panel {
  overscroll-behavior-y: chain;
  overscroll-behavior-x: contain;
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗