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.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form 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. Setting an upstream Git branch

    There’s no such thing as syncing in Git, but setting an upstream branch is about as close as it gets.

  2. How to rename the ‘master’ branch on GitHub

    So renaming master to main is a good idea, but how do we do it? Fortunately, it’s really straightforward if your repository lives on GitHub.