How to stop page scrolling when you have an open dialog element

I was implementing a <dialog> element on a recent project, but was bothered by how the page kept scrolling in the background.

I noticed that when a <dialog> is open, the browser adds an open attribute to that element.

<dialog class="example-dialog" open>...</dialog>

Knowing that, combined with the :has selector, makes this a pretty straightforward one-liner in CSS:

body:has(.example-dialog[open]) {
  /* Poof! No more scrolling! */
  overflow: hidden;
}

A caveat here is that the <dialog> should not possibly need scrolling - that is, it should be pretty short in terms of content.

Hope that helps you!