CSS Tip: What is Scroll Chaining?

jyotishman

Jyotishman Saikia

Posted on June 2, 2021

CSS Tip: What is Scroll Chaining?

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

πŸ’– πŸ’ͺ πŸ™… 🚩
jyotishman
Jyotishman Saikia

Posted on June 2, 2021

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

Sign up to receive the latest update from our blog.

Related