0
172
ViewsHow to disable chrome native "max-scroll" overlay?
I've searched for 15 minutes for a similar question but could not find it, so here it is :
My app is a fullscreen canvas with the user constantly moving is finger on the screen, thus I want to get rid of chrome native "max-scroll" overlay (see picture below), which occurs when the user is moving his finger up or down
My body is stylised like so :
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
And I've tried things like preventDefault() on window touchstart and scroll events but nothing seems to do the work :(
·
Juan Pablo Isaza
2 answers
Answer question0
You can use the overscroll-behavior in CSS to prevent overscroll effects.
It takes three possible values:
- auto - Default. Scrolls that originate on the element may propagate to ancestor elements.
- contain - prevents scroll chaining. Scrolls do not propagate to ancestors but local effects within the node are shown. For example, the overscroll glow effect on Android or the rubberbanding effect on iOS which notifies the user when they've hit a scroll boundary. Note: using overscroll-behavior: contain on the html element prevents overscroll navigation actions.
- none - same as contain but it also prevents overscroll effects within the node itself (e.g. Android overscroll glow or iOS rubberbanding).
To prevent the overscroll glow:
body {
overscroll-behavior: none;
}
·
Juan Pablo Isaza
Report
0
try this
html, body {
overscroll-behavior: none;
}
·
Juan Pablo Isaza
Report
Answer question