Styling Scrollbars with CSS

Designing the scrollbars of the browser has become popular lately, and I encounter many websites styling it differently, fitting their overall design and branding.

There are several ways to design these scrollbars, and in this post, we’ll see how to do it using CSS3. If you’re new to the world, know that since the beginning of the web, changing the appearance of scrollbars was not a simple task, especially with the need for consistency across different browsers.

But fortunately, in September 2018, a draft of W3C was released called CSS Scrollbars, and it seems like a practical and good way to achieve this.

Styling the browser’s scrollbars can have value in connection with the company or business branding. Take a look at the scrollbars of this page and see what I’m talking about – it’s an example of how scrollbars can look.

By the way, over the years, many ways to do this have appeared, and Internet Explorer was the first to provide a CSS API for styling scrollbars. But many developers were frustrated in the search for a comprehensive solution and eventually created different JavaScript solutions.

Fast forward to today, and now that Internet Explorer is being phased out for Microsoft Edge on the Chrome engine, the options for styling scrollbars are narrowed down to two CSS approaches:

• Chrome/Edge/Safari – Using -webkit-scrollbar
• Firefox – Using the new CSS Scrollbars API (scrollbar-color and scrollbar-width).

Let’s see some examples…

Scrollbars in Chrome/Edge/Safari

Styling the scrollbars in these browsers is possible using the vendor prefix called -webkit-scrollbar:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: #fbfaf8;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: #2d2d2d;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #fbfaf8;  /* creates padding around scroll thumb */
}

However, there is good news and bad news… The good news is that the code will work excellently in the latest versions of Chrome/Edge/Safari. The bad news is that these specifications were recently abandoned by W3C, and it can be expected that they will stop working in the near future.

Scrollbars in Firefox

Firefox is known for being the first to adopt W3C standards. Now, the new features of CSS Scrollbars already exist in Firefox versions:

body {
  scrollbar-width: thin;          /* "auto" or "thin"  */
  scrollbar-color: #2d2d2d #fbfaf8;   /* scroll thumb & track */ 
}

Enjoy! You might notice a few differences compared to using the abandoned -webkit-scrollbar specification. The first is that it’s much more concise and visually pleasing. The second is that you can’t create padding and border-radius for the “track thumb.” However, these features will likely be added in the not-too-distant future…

So, what should we use?

So, what should we do when there’s no single API that all browsers use? Simply combine the two approaches we mentioned:

/* The emerging W3C standard
   that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: #2d2d2d #fbfaf8;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: #fbfaf8;
}
*::-webkit-scrollbar-thumb {
  background-color: #2d2d2d;
  border-radius: 20px;
  border: 3px solid #fbfaf8;
}

With this code, as soon as -webkit-scrollbar is no longer available, there will be a fallback to the new CSS Scrollbars standard, so there’s nothing to worry about. Feel free to check the post in different browsers (in their latest versions) to see the result…