Disable Elastic Scrolling Chrome/Safari

Question

This method does not work at all for me.

Is there any updated modern way of doing this?

My clients always hate it and I've yet to find a good way to disable it.

By elastic scrolling, I mean once you've reached the top or bottom of the page, these browsers allow the page to "overscroll" to show a blank area. I'm trying to prevent this behavior.

Use JS. http://stackoverflow.com/questions/14993804/preventing-elastic-scrolling-on-os-x-chrome-and-safari — Laurentiu L., Jan 19 '16 at 11:10
Or something like this maybe http://jsfiddle.net/Volker_E/jwGBy/24/ — Laurentiu L., Jan 19 '16 at 11:38
From this answer http://stackoverflow.com/a/15138275/4807777 — Laurentiu L., Jan 19 '16 at 11:47

score 2 · Answer 1 · answered Jan 25 '16 at 21:41

If that CSS hack does not remove it in your case, then you will probably need to use JS to handle the scrolling.

I would strongly advise against this though, because users expect scrolling to behave a certain way. Not to mention it can be very difficult to get JS scrolling to be smooth and to be as responsive as native scrolling is.

I don't know what you are building so of course this may not apply to your case, but you should generally (as in, always, unless you have a compelling reason against it) leave common interactions like this up to the OS to avoid confusing the user. Your clients may not like it, but it is what their users are going to expect, and that should be more important.

score 2 · Answer 2 · answered Dec 09 '20 at 01:33

2

Here a way to disable it for chrome

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}

From: https://developers.google.com/web/updates/2017/11/overscroll-behavior

answered Dec 09 '20 at 01:33

Allan Raquin

583
7
26

storsoc · Answer 3 · 2021-09-23T19:27:25.457

Modern browsers may have changed (thought I'd sorted this out years ago, but technique from an older project no longer works) but this is what I am using now, not having users or personal gripe serious enough to explore JavaScript scroll-event-foo:

<style>
    html, body {
        overscroll-behavior: none;

        /* nothing special */
        margin: 0; padding: 0;
        background-color: #000000; /* anything on-theme */
    }
    .scrollBody {
        display: block;
        height: 100vh; /* 100% does not do it */
        overflow: scroll;
        overscroll-behavior: contain;
    }
</style>
<body>
    <div class='scrollBody'>
        <!-- everything else -->
    </div>
</body>

Basically, assign and constrain scrolling to the element immediately within the body. You may still get rubber-banding if users starts the gesture on a fixed or absolute element like a header or footer area, so at least set the <body> colour on-theme to minimize how noticeable it is.

Tests well in Chrome, Safari and Edge at this time (on macOS with touchpad, possibly a factor) and might be a starter clue/approach if you're working it out in other environments.

Disable Elastic Scrolling Chrome/Safari

3 Answers3