Chrome 144 features a small change to
overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal)<dialog>is open.
YES! Way back in 2019, I worked on “Prevent Page Scrolling When a Modal is Open” with Brad Wu about this exact thing. Apparently this was mere months before we got our hands on the true HTML <dialog> element. In any case, you can see the trouble with active scrolling when a “dialog” is open:
The problem is that the dialog itself is not a scroll container. If it was, we could slap overscroll-behavior: contain on it and be done with it. Brad demoed his solution that involved a JavaScript-y approach that sets the <body> to fixed positioning when the dialog is in an open state:
That’s the tweak Bramus is talking about. In Chrome 144, that’s no longer the case. Going back to that first demo, we can do a couple of things to avoid all the JS mumbo-jumbo.
First, we declare overscroll-behavior on both the dialog element and the backdrop and set it to contain:
body {
overscroll-behavior: contain;
}
#dialog {
overscroll-behavior: contain;
}You’d think that would do it, but there’s a super key final step. That dialog needs to be a scroll container, which we can do explicitly:
#dialog {
overscroll-behavior: contain;
overflow: hidden;
}Chrome 144 needed, of course:
The demo that Bramus provided is much, much better as it deals with the actual HTML <dialog> element and its ::backdrop:
Prevent a page from scrolling while a dialog is open originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
from CSS-Tricks https://ift.tt/h03GJ6m
via IFTTT
No comments:
Post a Comment