How to Prevent Whole Page Scrolling (Scroll Chaining)

Has it ever happened to you that while scrolling down within a smaller window (div), once you reached the bottom, the entire webpage suddenly started moving? This phenomenon is called "Scroll Chaining". Fortunately, we can elegantly solve it with just one line of CSS code.

What does overscroll-behavior: contain do?

When you reach the end of scrollable content within a div element, scroll events remain confined to that element only.

• Restriction: Scrolling will not propagate to the body element.
• Stability: The main page stays still, improving the user experience on mobile devices.

Why use overflow-y: auto?

This enables vertical scrolling of content within the element only when the content actually exceeds its height, while simultaneously, in combination with overscroll-behavior, prevents any impact on parent elements.

What happens without this setting?

If you don\'t use this and the user reaches the end of content in a div, the scroll "spills over" to the parent element (e.g., body). Consequently, the entire page starts moving, which is particularly annoying in modal windows or side menus.

Browser Support

The overscroll-behavior property is supported in most modern browsers (Chrome, Edge, Firefox, Safari), making it a standard solution today. Older browsers, such as IE11, do not support it, but in those cases, the page simply operates, according to the old principle.

.scroll-container {
    height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
}