Comment by simonw
17 days ago
This is a neat piece of modern CSS:
body:has(dialog[open]) {
overflow: hidden;
}
https://caniuse.com/css-has confirms the has() selector has had widespread browser support since December 2023.
17 days ago
This is a neat piece of modern CSS:
body:has(dialog[open]) {
overflow: hidden;
}
https://caniuse.com/css-has confirms the has() selector has had widespread browser support since December 2023.
YMMV / be careful with this, body:has() and html:has() can be extremely expensive (and introduce severe lag visible to the user) if you have dynamic components on the page that are constantly altering the DOM (ex. react/vue apps)
Inert should be used instead of overflow. Achieves the same thing but is also compliant with accessibility in a way overflow isn’t
I still can see my scrollbar and scroll with inert?
Its intended to stop interaction[0] of background elements. It can be used as part of the solution to stop the background scrolling.
Per MDN When implementing modal dialogs, everything other than the <dialog> and its contents should be rendered inert using the inert attribute.[1]
`body[inert] { overflow: hidden; }`
This would be better, and is what I was getting at. I can't edit the other comment unfortunately.
[0]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...
[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
2 replies →
I used this same approach in a recent web app and it worked great. You can also use scrollbar-gutter: stable, which disables scrolling but maintains the preserved space to avoid content reflows.