Bramus:
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)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 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 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 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/6D8TsuF
Gain $200 in a week
via Read more