How to disable scrolling the page behind a dialog element

August 2, 2024

Here’s how you can disable scrolling of the page behind a dialog element using :has() selector. Courtesy of this tweet by Adam Argyle.

html:has(dialog[open]) {
  overflow: hidden;
}

Previous: Temporarily disable timestamps in Laravel Next: Force HTTPS for all the URLs in Laravel

» Share: Twitter, Facebook, Hacker News

Was that useful? Consider leaving a

Tip

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Become a Sponsor Join my newsletter

Comments?