Comment by todotask
I still can see my scrollbar and scroll with inert?
I still can see my scrollbar and scroll with inert?
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.
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...