Fixing the overscroll "bounce" effect with CSS

Ever noticed the "bounce" scroll effect after reaching the end of a page showing a white background especially for SPAs (Single Page Application)? That's the background color of the body (if white or not defined) appearing when the SPA root (mounted) element slides down.

I find it particularly annoying as it breaks the flow, look and feel of the website or application. Now you might say why not just add a background color to the body/html/root element and get away with it? You can but what if there's a header with a slightly different color shade? When you scroll up, you will get that color mismatch which is not pleasant to look at.

The CSS property overscroll-behavior defines what the browser will do once it reaches the end of the scroll area both vertically (Y-axes) and horizontally (X-axes). overscroll-behavior can be broken down into overscroll-behavior-x and overscroll-behavior-y properties, allowing developers to control the X and Y scroll separately.

overscroll-behavior-y controls the "bounce" effect and "pull-to-refresh" behavior and setting it to none will disable those behaviors. overscroll-behavior-x controls the prev/next gesture navigations, so they will be disabled if it is set to none.

A quick fix for the vertical overscroll "bounce" effect for the page is to apply overscroll-behavior-y: none; to the body element.

body {
    overscroll-behavior-y: none;
}

overscroll-behavior-y will only apply to vertical scroll and will have no effect on horizontal scrolls, which will preserve prev/next trackpad gesture navigations.

I recommend applying the overscroll-behavior property on the body (to apply it for the encompassing page) because some browsers don't support the property on html or root elements.

Another use case for overscroll-behavior is isolating scrolling to the current scroll area, meaning, it should not scroll the parent scroll area once it reaches the end of scroll area of the current target. For example, if you have a scrollable menu or an iframe overlaying on top of the body, and if you don't want the body to scroll once the user scrolls past the scrollable area of the menu/iframe, you can set overscroll-behavior to contain and it will not propagate the scroll outside of the target area.

Thoughts

Don't sleep on the overscroll-behavior CSS property, and use it according to your requirements. If the bounce effect doesn't get in the way of the user interface and it doesn't look off, then you have no reason to disable the default scroll behavior. Understanding the trade-offs is what makes the difference.