CSS Tip: What is Scroll Chaining?

Jyotishman Saikia - Jun 2 '21 - - Dev Community

Did you ever experienced this behaviour when the parent container starts scrolling once the child scroller reached its full extent .

Alt Text

If you're a victim of this problem anytime than you might have used CSS property overflow-y: hidden on the parent container or might have used position: fixed

You don't need to use such hacks anymore. There is a CSS property to control such overflow effects. Just apply overscroll-behavior on the body to prevent it from happening anywhere.

body {
overscroll-behavior: contain; /* or "none" */
}

image

Demo- https://codepen.io/jyotishman/pen/yLMKvWX

For more such content, follow me on twitter -
username- frontend_jsx

. . . . . . . . . . . . . . . . . . . . .