Did you ever experienced this behaviour when the parent container starts scrolling once the child scroller reached its full extent .
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" */
}
Demo- https://codepen.io/jyotishman/pen/yLMKvWX
For more such content, follow me on twitter -
username- frontend_jsx
Top comments (9)
Great tip! I'll definitly add this to my css-toolbox :D
glad you liked this article.
For more such content- follow me on twitter-
frontend_jsx
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.
thanks Atul ! for doing that.
You might want to caveat this solution, and let people know that it isn't supported on Safari or IE.
I recommend you to create two CodePen projects to show people how both will be different.
Thanks zenw!
You can find both these demo here-
codepen.io/jyotishman/pen/yLMKvWX