scrollbar

A brief history of styling scrollbars:

1. It used to be a thing only Internet Explorer could do (ancient versions) with stuff like -ms-scrollbar-base-color. These do not exist anymore.
2. Then WebKit-based browser engines got on board with stuff like ::-webkit-scrollbar. That’s what this Alamanac entry mostly covers, as it works across the Safari/Chrome landscape today.
3. Standards have finally gotten involved, and those styling options are covered by un-prefixed properties like scrollbar-color and scrollbar-width.

---

Styling scrollbars for the Safari/Chrome world is exposed behind the -webkit vendor prefix.

This almanac entry is an overview, for a more complete breakdown of working with custom scrollbars, please read this CSS-Tricks article.

body::-webkit-scrollbar {
  width: 1em;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:

1. ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements
2. ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar
3. ::-webkit-scrollbar-track addresses the empty space “below” the progress bar
4. ::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
5. ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element
6. ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet
7. ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements

In addition to these pseudo-elements, there are also eleven pseudo-selector classes that aren’t required but provide designers with the power to style various states and interactions of the scrollbar UI. A full breakdown of those pseudo-selectors, and a detailed example, can be found in this CSS-Tricks article.

Notes on usage

• If there is no qualifying selector preceding the various pseudo-elements, the styles will apply to any scrollbar that may appear on the page.
• Setting -webkit-scrollbar styles is a good way to force your webpage to show horizontal or vertical scrollbars on versions of Mac OS newer than Lion, on which scrollbars are usually hidden by default.
• Since this property is behind a -webkit vendor prefix, several jQuery plugins have been written to “polyfill” or extend this functionality to other browsers. One such plugin is jScrollPane.

Browser support

CSS tricks that use scrollbar

Next steps with scrollbar

• The Current State of Styling Scrollbars (CSS-Tricks)
• Custom Scrollbars in WebkKit (CSS-Tricks)
• How To Customize the Browser’s Scrollbar with CSS (DigitalOcean)
• Two Browsers Walked Into a Scrollbar (Zach Leatherman)
• Surfin’ Safari: Styling Scrollbars (WebKit Blog)

Related