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.
Top comments (0)