Stylish HTML: Prevent Scrolling when a Dialog is open

Want to prevent scrolling when a modal dialog is open? Use the :modal pseudo-class with body:has() to disable scrolling purely in CSS—no JavaScript needed.

body:has(dialog:modal) {
  overflow: hidden;
}
body:has(dialog:modal) {
  overflow: hidden;
}

Demo:

A modal dialog opens and the page behind it cannot be scrolled

The :modal pseudo-class matches elements that are in a state where they exclude all interaction with elements outside of it until the interaction has been dismissed. This includes dialogs opened with showModal().