AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.
The overscroll-behavior property in CSS controls whether an element will use “scroll chaining” or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside of an element that has it’s own scrolling (say it’s vertical) and you have scrolled down to the bottom of it, then by default, the next parent element up (maybe the page itself) starts to scroll in that direction. If you don’t want that default, overscroll-behavior is what controls it.
.stop-scroll-chaining {
overscroll-behavior: contain; /* or "none" */
}
See the Pen
overscroll-behavior by Chris Coyier (@chriscoyier)
on CodePen.
The property cascades (i.e., is inherited), so if you don’t like any element doing it, you could apply it to the body to prevent it from happening anywhere:
body {
overscroll-behavior: contain; /* or "none" */
}The none value is supposed to stop overscroll affordance, which my best guess means that stuff like that rubber banding stuff that some browsers do, particularly devices with touchpad scrolling.
The default value is auto.
Resources
Browser Support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 65 | 59 | 11 | 79 | No |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 87 | 83 | 81 | No |
I just learned about this CSS property. Total game changer! I feel like this is going to create a much more natural user experience.
I am looking for a solution to stop rubber band effect but keep the scroll chaining. Does anyone know a solution?
Awesome, until you’re trying to prevent it on iOS… Anyone found a workaround ?