HTML's Background Color and Overscroll

Published on Jul 15, 2016

Here's a little tip if you're working on a site whose header and footer are the same color.

click on the gifs to play, click again to stop

The not-happy version of scrolling past a header that leaves behind it a white break. — When overscrolling (rubber-banding) it can show the non-header/footer color.

The happy version of scrolling past a header that doesn't leave behind the white bar. — Now it feels a bit more, dare I say, native?

How to do this:

html {
  background-color: $header-footer-color;
}

body {
  background-color: $maybe-white;
}

For me, I just sort of have forgotten about the html element and how it can be styled. It's not "game changing" but if it fits for your site it can make a designer's day.

Here's a gist with some example code.

Here's a [live version]({{ site.baseurl }}/static/example/overscroll.html) version of that example code.

Here are two examples of this for Dell and Moz.

Where does this work?

I tested this in the latest versions of Chrome, Safari, and Opera. Firefox and IE don't do "overscroll".