Comment by simonw
This is a neat piece of modern CSS:
body:has(dialog[open]) {
overflow: hidden;
}
This is a neat piece of modern CSS:
body:has(dialog[open]) {
overflow: hidden;
}
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...
Your original message was "Inert should be used instead of overflow" which is incorrect because `inert` doesn't affect scrolling of the viewport. Your CSS rule example is a good way to demonstrate using the presence of an `inert` attribute on the body to determine when `overflow: hidden` should be applied to the body.
That section of the MDN article is somewhat confusing but if the dialog is opened using the `.showModal()` method, there's no need to add an `inert` attribute yourself, the browser automatically makes the rest of the page inert.
If a <dialog> that's meant to be modal is opened not using `.showModal()`, say by making it a `popover` and the `popovertarget` of a button, then you might set `inert` yourself (and remove it when the <dialog> is closed). However, you can't simply do <body inert> if that <dialog> is inside the <body> because then the dialog itself would be inert.
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.
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)