Set Background Color For Scroll Bouncing

PublishedFeb 24th, 2022

“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.

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 <html> element doesn’t have overflow: hidden; 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 <html> element;

That’s it!