A few days ago I stumbled upon a post about a CSS property I hadn’t seen before: overscroll-behavior
As per MDN docs:
“ The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y.”
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
It struck me as it was exactly what we needed on a piece of overlayed ui that had inner scroll and was causing the less than ideal effect of scrolling the entire page too.
Tested it out yesterday and it did the job wonderfully.
So, apart from some exceptions, whenever you set overflow: auto on a panel or some modal content, add this property too: overscroll-behavior: contain.
Although it’s still in Draft, it already has a fairly broad browser support:
It’s also available at CanIUse:
https://caniuse.com/#feat=css-overscroll-behavior
Top comments (0)