Prevent body from scrolling when a modal is open : css solution

greggcbs

GreggHume

Posted on September 10, 2024

Prevent body from scrolling when a modal is open : css solution

The latest solution is to use css. We were graced with the overscroll-behavior property. But it is worth noting it only seems to work if there is a scroll bar on the element you are applying it to, otherwise it seems to have no effect.

If you want to prevent scrolling from bleeding through to other divs you use:

overscroll-behavior: contain;
Enter fullscreen mode Exit fullscreen mode

or if you are using tailwind, the class is overscroll-contain

You can see its support here (it has full browser support):
https://caniuse.com/css-overscroll-behavior

More on overscroll here:
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Also see this stackoverflow discussion that has been discussing this top since 2012 and is still going.

💖 💪 🙅 🚩
greggcbs
GreggHume

Posted on September 10, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related