# 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 ``). 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: ```css .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): ```css .chat-window { overscroll-behavior-y: none; } ``` ## 4. Axis-Specific Properties You can control behavior for specific axes: * `overscroll-behavior-x` * `overscroll-behavior-y` * `overscroll-behavior-block` * `overscroll-behavior-inline` ```css /* Disable horizontal swipe navigation (history back/forward) */ body { overscroll-behavior-x: none; } ``` [[programming/css/css]] [[programming/css/scroll-snap]]