Styling scrollbars with CSS

CSS Scrollbars is something highly overlooked in CSS. Usually, they are not even present in layouts for approval, and if they do, they will probably only be noticed when they are very eccentric. After all, a good scrollbar is one that is not noticed.

However, customizing them can give a small gain in the experience of your website or app, especially if you have some content that is bigger than the element it contains. Standard browser or operating system scrollbars are not always going to be aesthetically pleasing.

In this article, I give a little tip on how to implement custom scrollbars on any website, using only CSS.

Browser engines and limitations

There is not a standard way to style the scrollbars yet, as browsers have not reached a consensus on the best way to achieve this goal. Currently, there are only three HTML engines on the market: Webkit, Blink and Gecko.

Webkit e Blink engines

Since Blink is a derivative of Webkit, the method used to style the scrollbars is the same. Safari, Gnome Web, and other lesser-known browsers use Webkit; Google Chrome and its derivatives Brave, Opera, Vivaldi and Edge all use Blink. This means that by using this method, you will cover more than 90% of the users.

This method uses CSS pseudo-elements to represent the different parts. They are not present in standard CSS specification, so -webkit- browser prefixes are required.

Here are elements:

• ::-webkit-scrollbar: represents the "body" of the bar, usually used to define general aspects such as width and height.
• ::-webkit-scrollbar-track: the scrollbar track.
• ::-webkit-scrollbar-thumb: the handle itself.

There are others pseudoelements besides these, but their use is very specific and generally unnecessary. Below is an example of the code, for a very discreet scrollbar.

.element::-webkit-scrollbar {
  width: 3px;
  height: 3px; /* The height is only seen on horizontal scrolling */
}

.element::-webkit-scrollbar-track {
  background: transparent;
  padding: 2px;
}

.element::-webkit-scrollbar-thumb {
  background-color: #000;
}

Although customization with this method is quite powerful, W3C, the institution responsible for internet standards, abandoned this specification. In the future, it will be discontinued.

Gecko

Gecko is the rendering engine used by Firefox and its derivatives Librewolf, TOR Browser, SeaMonkey, Waterfox and IceCat. Unlike Webkit and Blink based browsers, Gecko follows the W3C specifications. Instead of using pseudo-elements, normal CSS rules are used for this purpose.

Here are the rules:

• scrollbar-width: well... width or height of the scrollbar.
• scrollbar-color: colors of the scrollbar thumb (first one) and track (second one).

.element {
  scrollbar-width: thin;
  scrollbar-color: black transparent;
}

This method is much more elegant, but less powerful. It is important to note that no browser fully implements this specification. If you wish to use these rules in Webkit-based browsers, the prefix -webkit- must be used.

Wrap up

While the specification doesn't mature, your CSS styling should incorporate both methods. With that, the final code will look like this:

.element {
  scrollbar-width: thin;
  scrollbar-color: black transparent;
}

.element::-webkit-scrollbar {
  width: 3px;
  height: 3px; /* The height is only seen on horizontal scrolling */
}

.element::-webkit-scrollbar-track {
  background: transparent;
  padding: 2px;
}

.element::-webkit-scrollbar-thumb {
  background-color: #000;
}

Remember that to see the scrollbar in elements, the overflow[-x/-y]: scroll rule must be set.

See you in the next article!

Links

• This article in Portuguese
• CSS Scrollbar Styling - Can I Use
• CSS Scrollbars - MDN

If this article helped you in some way, consider donating. This will help me to create more content like this!