Set Background Color For Scroll Bouncing

“Scroll bouncing” — or when your browser lets you elastically scroll a little bit beyond the top or bottom of a page — is something you might come across daily but never pay much mind too.

It’s a feature of many mobile browsers, but as far as I’m aware, is only the default behavior with Chrome on desktop.

Scroll Bouncing in Chrome

You’ve likely stumbled upon this article because you’ve found yourself looking to change the color you see when you scroll beyond the edge of your page.

To avoid some confusion I had at first, make sure your page’s element doesn’t have applied to it. This will prevent scroll bounce behavior and make a hard stop at the top and bottom of your page.

At this point, you should be able to see the elastic behavior when scrolling to the top or bottom as seen in the screenshot above.

To set the color of what you see when you outside the page just set the background color of your element;

That’s it!

Written by

Front-end Web Developer. Language lover. Traveler. Dude.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store