overscroll-behavior
overscroll-behavior controls whether scrolling continues to the page outside (scroll chaining) once a scrollable box reaches its end. It keeps the page behind a modal or chat panel from moving when you scroll inside it.
Syntax
[ contain | none | auto ]{1,2}Preview
Shorthand breakdown
overscroll-behaviorCode
.box {
overflow: auto;
overscroll-behavior: contain;
}Controls
About
Values
auto: the initial value. At the end, the next scrollable box outside or the page keeps scrolling. Phone effects such as the bounce, pull-to-refresh and swipe to go back also happen.contain: scrolling does not continue outside. Effects inside the box, such as the bounce, are kept.none: likecontain, and also no bounce or other effects inside the box.
With two values, the first is horizontal (overscroll-behavior-x) and the second is vertical (overscroll-behavior-y). A single value applies to both.
The spec also has chain, which keeps scrolling outside but turns off the bounce and other effects inside the box. It works in Chrome and Edge 150 and Firefox 157, but the syntax display on this page does not support it yet, so it is left out of the syntax and the preview.
Trying the preview
The preview on this page uses a helper declaration, overflow: auto, so the box of long text can scroll. Point at the box, scroll to the bottom and keep turning the wheel. With auto, this whole page keeps scrolling; with contain or none, it stops. The preview looks the same for every value.
When to use it
- Keep the page behind a modal or drawer still while scrolling inside it (
overscroll-behavior: contain). - Turn off pull-to-refresh on phones (
overscroll-behavior-y: noneorcontainon html or body).
Watch out
- It applies to scroll containers (boxes whose
overflowisauto,scrollorhidden) and to the page itself. - Safari, Chrome 143 and earlier, and Firefox 149 and earlier ignore it on boxes whose contents do not overflow (nothing to scroll) and keep scrolling outside. Watch for this when a modal's contents are short.