CSS Tip: What is Scroll Chaining?
Jyotishman Saikia
Posted on June 2, 2021
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
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
December 21, 2021