v145 · CSS · Overscroll Behavior Comparison

Overscroll Behavior Comparison

The overscroll-behavior property controls two things: whether an elastic bounce effect is shown when the scroll boundary is reached, and whether the scroll event chains to the parent scrollable. Chrome 145 adds the elastic effect to nested scrollers, making auto vs contain vs none all behave meaningfully on inner containers.

Elastic overscroll is platform-dependent. It is visible on macOS and touchscreen devices. On Windows without a touchpad, all three values may look identical (no elastic animation) but scroll chaining differs.

three values, side by side

overscroll-behavior: auto

Elastic effect shown. Scroll chains to parent at boundary.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

overscroll-behavior: contain

Elastic effect shown inside. Scroll does NOT chain to parent — overscroll is contained.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

overscroll-behavior: none

No elastic effect. No scroll chaining. Hard stop at boundary.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

behaviour matrix

Value Elastic effect (Chrome 145+) Scroll chains to parent Best for
auto Yes Yes Default. Natural platform feel.
contain Yes No Chat panels, sidebars — keep scroll within the element.
none No No Pull-to-refresh prevention, map containers.

code

/* Recommended for most inner scroll areas (Chrome 145+) */
.sidebar { overflow-y: auto; overscroll-behavior: contain; }
/* → elastic bounce inside sidebar, parent page does not scroll */

/* Prevent pull-to-refresh on the root page */
body { overscroll-behavior-y: none; }

/* Per-axis: contain horizontal, allow vertical chaining */
.carousel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

see also

scenario focus

Select a scenario to focus its rendered example and summary.