Seamless Dialogs: Preventing Page Scroll with `overscroll-behavior` in Chrome 144
Learn about Chrome 144's `overscroll-behavior` enhancement, providing a simple CSS-only method to prevent background page scrolling when HTML `<dialog>` elements are open, simplifying UI development.
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.
Bramus recently highlighted a significant, albeit seemingly minor, change in Chrome 144 regarding the overscroll-behavior CSS property. This update now extends overscroll-behavior functionality to non-scrollable scroll containers, effectively resolving a long-standing developer challenge: preventing the underlying page from scrolling when a modal <dialog> is open.
This is a welcome fix! I recall working with Brad Wu on “Prevent Page Scrolling When a Modal is Open” back in 2019, addressing this very issue. This was just months before the true HTML <dialog> element became widely available. Regardless, the problem of active scrolling behind an open “dialog” has always been evident:
The core difficulty stemmed from the <dialog> itself not being a scroll container. If it were, applying overscroll-behavior: contain would have been a simple solution. Brad's earlier demo showcased a JavaScript-based approach that set the <body> element to fixed positioning when the dialog was active:
That JavaScript tweak is precisely what Bramus's observation addresses. With Chrome 144, such elaborate JavaScript is no longer necessary. Reverting to the initial demo, we can now achieve the desired effect with a few CSS declarations.
First, apply overscroll-behavior: contain to both the <body> (or the dialog's backdrop) and the dialog element itself:
body {
overscroll-behavior: contain;
}
#dialog {
overscroll-behavior: contain;
}
While this might seem sufficient, there's a crucial final step. The dialog needs to be explicitly defined as a scroll container. This can be achieved by adding overflow: hidden;:
#dialog {
overscroll-behavior: contain;
overflow: hidden;
}
This solution, of course, requires Chrome 144:
Bramus's provided demo offers an even more refined example, specifically demonstrating how to handle the actual HTML <dialog> element and its ::backdrop: