DEV Community

loading...
Cover image for CSS Tip: What is Scroll Chaining?

CSS Tip: What is Scroll Chaining?

Jyotishman Saikia
Technical Lead at Dotpe | Follow on twitter for more educational frontend tips @frontend_jsx
惻Updated on 惻1 min read

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

Discussion (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 Author

glad you liked this article.

Collapse
jyotishman profile image
Jyotishman Saikia Author

For more such content- follow me on twitter-
frontend_jsx

Collapse
feichinger 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 Author

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
zdoten profile image
z.En

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

Collapse
jyotishman profile image
Jyotishman Saikia Author • Edited

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