overscroll-behavior: chain

at a glance

background

The overscroll-behavior property controls two distinct aspects of what happens when a scroll container hits its boundary:

• Scroll chaining — whether the scroll propagates to an ancestor scroller.
• Local boundary effects — whether the element itself shows a visual overscroll effect (e.g. bounce, glow, rubber-band).

Before Chrome 150, the existing three values did not cover the combination of chaining allowed but no local bounce:

use case: side menu that scrolls through

A common pattern is an overlay drawer or side menu that is itself scrollable. The desired behaviour: when the user reaches the end of the menu's content, scrolling should continue to the page behind it — but the menu itself should not bounce or translate.

With auto, the menu would bounce at its boundaries before chaining. With contain, scroll never chains to the page. Only chain provides the desired combination:

.side-menu {
  overflow-y: auto;
  overscroll-behavior-y: chain;
}

syntax

chain is accepted wherever overscroll-behavior values are accepted:

/* shorthand — applies to both axes */
overscroll-behavior: chain;

/* longhand — set per axis */
overscroll-behavior-x: chain;
overscroll-behavior-y: chain;

/* block/inline logical variants */
overscroll-behavior-block: chain;
overscroll-behavior-inline: chain;

comparison with contain

The difference between chain and contain is solely whether scroll propagates:

• contain — suppresses chaining. When the scroller is exhausted, nothing further happens. Useful for modal dialogs that must not scroll the page behind them.
• chain — permits chaining. When the scroller is exhausted, the ancestor scroller continues. Useful for nested panels that should feel like part of a continuous scroll surface.

Both suppress the local boundary visual effect (bounce or rubber-band stretch) on the element itself.

browser support

see also

• MDN: overscroll-behavior
• CSS Overscroll Behavior Module Level 1 specification
• CSSWG issue #13370 — overscroll-behavior: chain
• overscroll-behavior-chain explainer
• chromestatus.com — overscroll-behavior: chain (5176802466201600)