Prevent body from scrolling when a modal is open : css solution
GreggHume
Posted on September 10, 2024
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;
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.
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
November 30, 2024