midCSS
Explain overscroll-behavior.
Updated Apr 28, 2026
Short answer
It controls what happens when a user scrolls past the boundaries of a scrolling container (scroll chaining or bounce effects).
Deep explanation
Normally, if you reach the bottom of a scrollable modal, continuing to scroll will cause the background page to scroll ('scroll chaining'). overscroll-behavior: contain prevents the scroll event from passing up to the parent. none also disables the OS-level 'bounce' effect.
Real-world example
Ensuring that scrolling inside a popup map or modal dialog doesn't accidentally scroll the main document underneath it.
Common mistakes
- Using heavy JavaScript event listeners (e.preventDefault() on scroll) to stop scroll chaining instead of this native CSS property.
Follow-up questions
- Does overscroll-behavior work on the body tag?