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

I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

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. The curse of knowledge

    I often throw out ideas for posts on ‘the basics’; surely everyone knows that stuff already? Well, I think I’ve been doing the wrong thing!

  2. Apple Watch’s default app view is bad

    My mum and brother counted Apple Watches amongst their Chistmas presents, and the one problem they both had was the default app view.