Question: 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](https://i.stack.imgur.com/kpS2Q.jpg)](https://i.stack.imgur.com/kpS2Q.jpg)

My `body` is stylised like so :

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

Answer: 
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;
}

```
try this

```
 html, body {
      overscroll-behavior: none;
    }

```