Have you ever been scrolling through a small window (div), and once you reached the bottom, the entire web page suddenly started moving? This is called "Scroll Chaining." Fortunately, we can solve this elegantly with a single line of CSS.
1. What does overscroll-behavior: contain do?
When you reach the end of the scrollable content in a div, the scroll events remain confined only to that element.
- Containment: Scrolling will not propagate to the
bodyelement. - Stability: The main page stays still, which significantly improves the user experience on mobile devices.
2. Why do we use overflow-y: auto?
This enables vertical scrolling within an element only when the content exceeds its height, while preventing the scrolling from affecting parent elements when combined with overscroll-behavior.
What happens without this setting?
If you don't use this and the user reaches the end of the div content, the scroll "leaks" to the parent element (e.g., the body). Consequently, the entire page starts moving, which is especially annoying with modal windows or sidebars.
Browser Support
The overscroll-behavior property is supported by most modern browsers (Chrome, Edge, Firefox, Safari), making it a reliable modern solution. Older browsers like IE11 do not support it, but the page simply functions with the default behavior there.
.scroll-container {
height: 300px;
overflow-y: auto;
overscroll-behavior: contain;
}