How To Style Scrollbars with CSS

Introduction

In September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS.

As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling. However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers.

In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers.

Prerequisites

To follow along with this article, you will need:

• Familiarity with the concepts of vendor prefixes, pseudo-elements, and graceful degradation.

Styling Scrollbars in Chrome, Edge, and Safari

Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.

Here is an example that uses ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::webkit-scrollbar-thumb pseudo-elements:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Here is a screenshot of the scrollbar that is produced with these CSS rules:

This code works in the latest releases of Chrome, Edge, and Safari.

Unfortunately, this spec has been formally abandoned by W3C and will likely be deprecated over time.

Styling Scrollbars in Firefox

Currently, styling scrollbars for Firefox is available with the new CSS Scrollbars.

Here is an example that uses scrollbar-width and scrollbar-color properties:

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */ 
}

Here is a screenshot of the scrollbar that is produced with these CSS rules:

This specification shares some commonality with the -webkit-scrollbar specification for controlling the color of the scrollbar. However, there is presently no support for modifying the padding and roundness for the “track thumb”.

Building Future-Proof Scrollbar Styles

You can write your CSS in a way to support both -webkit-scrollbar and CSS Scrollbars specifications.

Here is an example that uses scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Blink and WebKit browsers will ignore rules they do not recognize and apply -webkit-scrollbar rules. Firefox browsers will ignore rules they do not recognize and apply CSS Scrollbars rules. Once Blink and WebKit browsers fully deprecate the -webkit-scrollbar specification, they will gracefully fall back to the new CSS Scrollbars specification.

Conclusion

In this article, you were introduced to using CSS to style scrollbars and how to ensure these styles are recognized in most modern browsers.

It is also possible to simulate a scrollbar by hiding the default scrollbar and using JavaScript to detect height and scroll position. However, these approaches run into limitations with reproducing experiences like inertia scrolling (e.g., decaying motion when scrolling via trackpads).

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.