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

The

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

CodePudding user response：

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

CodePudding user response：

try this

html, body { overscroll-behavior: none; }