Overscroll Behavior Property
Last updated: 2026-09-13
overscroll-behavior Overscroll Behavior Property
The overscroll-behavior property controls what happens when a scrolling container reaches its boundary — for example, whether the scroll event passes to the parent container (scroll chaining) or triggers a browser default like page refresh or history navigation. It is a key property for solving the scroll-penetration problem in nested scrolling containers.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
overscroll-behavior: contain | none | auto;⚙️ Values
| Value | Type | Description |
|---|---|---|
contain | none | auto | Keyword | The behavior at the scroll boundary |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overscroll-behavior | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： contain blocks scroll chaining, so scrolling to the boundary inside the container no longer moves the outer container; none additionally blocks browser default boundary behaviors such as iOS rubber-banding.
Tip： For modals, sidebars, and floating panels with nested scrolling, overscroll-behavior: contain is recommended so users do not accidentally scroll the page behind.
❓ FAQ
QWhat is the difference between overscroll-behavior and touch-action?
Aoverscroll-behavior controls how the scroll chain propagates after reaching the boundary — whether it moves the outer container or triggers browser behaviors like refresh and rebound. touch-action controls how the browser interprets touch gestures — whether panning, zooming, or double-tap zoom are allowed. The former targets what happens when you scroll past the edge; the latter targets how gestures are interpreted. They solve different problems.
QWhy does the page still scroll even though I set overscroll-behavior: contain?
Aoverscroll-behavior only acts on scroll chaining: when an inner container reaches its boundary and tries to hand the scroll to the outer layer, contain intercepts that handoff. If the scroll event never comes from the scrolling container, or the outer page itself is being scrolled by the finger on mobile, contain does nothing. Also confirm the property is set on the container that actually scrolls.
QWhat is scroll chaining, and how do I stop scroll penetration?
AScroll chaining means that after an inner element scrolls to its boundary, the scroll continues and passes to the parent or the page — the classic scrolling-inside-a-modal-also-scrolls-the-page penetration. Set overscroll-behavior: contain on the content container of the modal, sidebar, or drawer to intercept the pass-through; none additionally disables browser defaults like pull-to-refresh and rebound.
QWhat is the relationship between overscroll-behavior and overscroll-behavior-x/y?
Aoverscroll-behavior is the shorthand that sets the boundary behavior for both axes at once; overscroll-behavior-x and overscroll-behavior-y are the longhands for the horizontal and vertical directions. For example, to block scroll chaining only vertically, write overscroll-behavior-y: contain.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
