How to disable chrome native "max-scroll" overlay?

user_9641641 0
Viewed 71

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

enter image description here

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 :(

mobile google-chrome css html javascript
2 Answers

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;
}
user_197935830

try this

 html, body {
      overscroll-behavior: none;
    }
user_128181540
Related