Skip to main content

Scroll-bounce page background colour

Posted in CSS

There’s a nice feature in Safari and Chrome (and any Chromium-based browser, like Edge and Opera) where, if you scroll up or down the page and hit the top or bottom, there’s a satisfying bounce, rather than an abrupt stop.

The bounce reveals a white background behind the main page canvas, but that’s a bit boring so let’s have a look at adding our own colourful flourish to our visitors scrolling.

I’d love to tell you it was as simple as this:

html {
background-color: blue;
}

body {
background-color: white;
}

Actually, dealing with it cleanly in the CSS like this, with no extra HTML works well Chromium-based browsers, but you’re going to want the same effect on Safari so that everyone using iOS can enjoy your blue background too.

On Safari (on macOS and iOS), if the <body> element has a background-color, that’s what’s seen on the bounce, so in the above example, the background-color of the <body> is both the canvas and its background. The blue background of the <html> is ignored. Annoying.

So we need a separate canvas element that sits on top of both <html> and <body>:

<!doctype html>
<html lang="en">
<head>
<!-- All the page meta data goes here -->
</head>
<body>
<div class="canvas">
<!-- All the page content data goes here -->
</div>
</body>
</html>

And the CSS will look like this:

html {
background-color: blue;
}

.canvas {
background-color: white;
}

Now, with a little extra HTML, anyone using Chrome or Safari will see a white page with a hidden blue background that peeks out when they scroll to the top or bottom of the page.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. How I approach CSS: my ABC system

    CSS is easy to write but can become messy and bloated over time. A solid methodology can make maintenance much more comfortable; here’s how I do it.

  2. Critical CSS: what it is, why it’s useful, and how it works

    With Critical CSS, we can give our visitors the most important styling as early as possible and the rest when it’s ready. Here’s why and how to do it.