v145 · CSS · Nested Scroller Demo

Nested Scroller Demo

Scroll these nested containers past their boundaries. On Chrome 145+ (macOS or touchscreen) you'll see the elastic overscroll effect — the content springs back from the edge. On older Chrome the containers stop hard at their boundaries.

Best experienced on macOS or a touchscreen device where elastic overscroll is a platform convention. On platforms without a native overscroll effect, both old and new Chrome may show no bounce.

vertical nested scroller

overscroll-behavior: auto

Elastic effect shown, scroll chains to parent if at boundary.

Item 1 — scroll down to see more
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8 — end of list

overscroll-behavior: auto

overscroll-behavior: contain

Elastic effect shown inside the element, but scroll does NOT chain to the parent.

Item 1 — scroll down to see more
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8 — end of list

overscroll-behavior: contain

horizontal nested scroller

Horizontal elastic overscroll works the same way on nested elements.

Horizontal scroll with overscroll-behavior: auto

Alpha
Beta
Gamma
Delta
Epsilon
Zeta
Eta
Theta
Iota
Kappa — end

overscroll-behavior: auto — scroll past edges to see the bounce

code

/* Default (Chrome 145+) — elastic overscroll on nested elements */
.inner-scroll {
  overflow: auto;
  height: 200px;
  /* overscroll-behavior defaults to auto */
}

/* Contain: elastic effect + no scroll propagation to parent */
.inner-scroll {
  overflow: auto;
  overscroll-behavior: contain;
}

/* No effect at all: hard stop */
.inner-scroll {
  overflow: auto;
  overscroll-behavior: none;
}

see also

scenario focus

Select a scenario to focus its rendered example and summary.