DEV Community

Cover image for CSS Tip: What is Scroll Chaining?
Jyotishman Saikia
Jyotishman Saikia

Posted on • Updated on

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

Top comments (9)

Collapse
 
elischei profile image
Eli H. Schei

Great tip! I'll definitly add this to my css-toolbox :D

Collapse
 
jyotishman profile image
Jyotishman Saikia

glad you liked this article.

Collapse
 
jyotishman profile image
Jyotishman Saikia

For more such content- follow me on twitter-
frontend_jsx

Collapse
 
fjones profile image
FJones • Edited

My question with a lot of these supposed fixes is always: How many people have gotten used to the behaviour already? Often, the "improved" behaviour becomes jarring because users are already trained to expect the prior handling.

It's also a thing to bear in mind with accessibility. Frustration and retraining is often more harmful than the satisfaction of smooth page handling.

I've personally noticed this with the forced tab groups on Chrome mobile - which the latest updates seem to have removed again. Both times, it's more frustrating to retrain for the changed behaviour than to just tolerate it as it is, once you get used to it.

Edit: Of course, that's also a matter of time, as in my example. After a while, people do get used to the change again, so it's more of a short-term inconvenience.

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Collapse
 
jyotishman profile image
Jyotishman Saikia

thanks Atul ! for doing that.

Collapse
 
imjb87 profile image
John Bell

You might want to caveat this solution, and let people know that it isn't supported on Safari or IE.

Collapse
 
mrzenw profile image
MrZenW

I recommend you to create two CodePen projects to show people how both will be different.

Collapse
 
jyotishman profile image
Jyotishman Saikia • Edited

Thanks zenw!
You can find both these demo here-
codepen.io/jyotishman/pen/yLMKvWX