CSS Overscroll Behavior
The overscroll-behavior property allows you to control the browser's behavior when the boundary of a scrolling area is reached. It is primarily used to prevent "scroll chaining" (where scrolling a child element also scrolls the parent) and to disable native pull-to-refresh gestures.
1. The Problem: Scroll Chaining
By default, when you scroll to the bottom of a scrollable area (like a modal or sidebar) and keep scrolling, the browser starts scrolling the parent container (usually the <body>). This is called scroll chaining.
2. Values
auto(Default): The standard browser behavior. Scroll chaining occurs, and native gestures (like pull-to-refresh on mobile) are active.contain: Prevents scroll chaining. The scroll interaction stays within the element. However, native gestures (like overscroll glow or bounce) might still happen inside the element.none: Prevents scroll chaining AND prevents native gestures (no bounce, no pull-to-refresh).
3. Basic Usage
To prevent a modal or sidebar from scrolling the page behind it:
.sidebar {
overflow-y: auto;
overscroll-behavior: contain;
}To disable pull-to-refresh on a specific part of a web app (e.g., a chat window):
.chat-window {
overscroll-behavior-y: none;
}4. Axis-Specific Properties
You can control behavior for specific axes:
overscroll-behavior-xoverscroll-behavior-yoverscroll-behavior-blockoverscroll-behavior-inline
/* Disable horizontal swipe navigation (history back/forward) */
body {
overscroll-behavior-x: none;
}