I’ve had a couple of experiences customizing the look and feel of a browser scrollbar (in Google Meet and in my blog as far as I can remember) and I want to kstore this knowledge somewhere for further reference. And who knows, you mind find it useful too.

The ::-webkit-scrollbar

::-webkit-scrollbar is a non-standard CSS pseudoselector that allows you to customize the look and feel of a scrollbar in WebKit browsers using pure CSS.

The ::-webkit-scrollbar API is very sparsely documented and getting to grips with how it works is largely a process of trial an error. It provides a series of selectors that let you style the different parts of a scrollbar:

 -------------------------
 |                     |^|  --> scrollbar-button  
 |                     |v|  --> scrollbar-button
 |                     |-|                              -
 |                     |x|                              |
 |                     |x|  --> scrollbar-thumb         |
 |                     |x|                              |
 |                     |-|                              | --> scrollbar-track
 |                     | |                              |
 |                     | |                              |
 |                     | |  --> scrollbar-track-piece   |
 |                     | |                              |
 |                     |-|                              -
 |                     |^|
 |                     |v|
 |                     |-|
 |                     | |  --> scrollbar-corner or resizer
 |-----------------------|

::-webkit-scrollbar {}
::-webkit-scrollbar-button {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}
::-webkit-scrollbar-thumb {}
::-webkit-scrollbar-corner {}
::-webkit-resizer {}

An example of customizing the scrollbar can be found in this very blog. Just take a look at dev tools and search for ::-webkit-:

/**
 * Scrollbar. This only apply in supported browsers.
 * https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
 */
/* width */
::-webkit-scrollbar {
  width: 10px;
  background: #c7c7c738;
}
::-webkit-scrollbar:hover {
  width: 10px;
  background: #c7c7c74d;
}

/* Track */
::-webkit-scrollbar-track {
  margin: 3px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #00cc6d;
}

Some things that are important to consider are:

• The ::-webkit-scrollbar- rules don’t have any effect unless a ::-webkit-scrollbar CSS rule exists
• CSS animations like transitions doesn’t seem to be supported
• Transparency doesn’t work unless you combine the custom scrollbar styles with overflow:overlay

Using Overflow: Overlay

overflow: overlay is yet another feature that is only supported in WebKit based browsers yet it is quite useful. When you apply overflow: overlay, the scrollbar appears as an overlay on top of the content so that it doesn’t take additional space.

CSS Scrollbars Module 1

There’s an initiative to standardize the control of the styles of a scrollbar with CSS: the CSS Scrollbars Module 1 standard. In its current form it only allows for two rules: scrollbar-color and scrollbar-width. To this data it is only supported on Firefox.

CSS Scrollbars standardizes the ability to style scrollbar controls, such as their color, introduced in 2000 by Windows IE 5.5. This is useful when building web applications which use color schemes very different from the appearance of default platform scrollbars.

Additional reading

• ::-webkit-scrollbar in MDN
• Styling scrollbars - Webkit blog
• The current state of styling scrollbars on CSS tricks
• Custom scrollbars in webkit