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. Using Git restore to discard changes within a file

    git restore is great, and one of its superpowers is its patch mode where we can restore parts of a file, rather than the whole file at once.

  2. Undelete a file with Git

    I’ve talked about how great git restore is, but I missed a really obvious use of git restore: restoring a deleted file!