// Tutorial //

How To Style Scrollbars with CSS

Published on September 2, 2020 · Updated on November 30, 2021
Default avatar
By William Le
Developer and author at DigitalOcean.
English
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:

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:

Screenshot of an example webpage with a customized scrollbar with a blue scrollbar on an orange track.

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:

Screenshot of an example webpage with a customized scrollbar with a blue scrollbar on an orange track.

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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
3 Comments

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Hi William,

For a specific part of the screen like sidebars, I have turned it into a class, so I just have to put it in elements that overflow:

/* Scrollbar styling */

/* Works on Firefox */
.scroll-black * {
	scrollbar-width: thin;
	scrollbar-color: rgb(70, 70, 70) auto;
}

/* Works on Chrome, Edge, and Safari */
.scroll-black *::-webkit-scrollbar {
	width: 7px;
}

.scroll-black *::-webkit-scrollbar-track {
	background: transparent;
}

.scroll-black *::-webkit-scrollbar-thumb {
	background-color:rgb(70, 70, 70);
}

/* End scrollbar styling*/

I find CSS scrollbars are useless and ugly. This is a stupid ideal that Apple created for MAC OS X Lion. What wrong with the classic scrollbars.

Thanks, helped me a lot!