Scrollbar customisation in CSS and JS

One day some designers provide you with beautiful mock-ups ๐ŸŒ  and โ€ฆ custom macOS-like scrollbars which look like:

MacOS-like scrollbar
MacOS-like scrollbar

But maybe on the left, smaller or bigger, with different indents dependent on whether itโ€™s mobile ๐Ÿ“ฑ, desktop ๐Ÿ–ฅ๏ธ or TV screen ๐Ÿ“บ Asking more? But the reality isโ€ฆ a customisation of scrollbars remains same since the end of 90s. If my dad was programming, he would make fun of me all day while I found the solution to make everything universal and stable. Itโ€™s 2020 and itโ€™s still a PITA.

Native support

WebKIT Pseudo-elements for scrollbar
1::-webkit-scrollbar {
2 /** */
4::-webkit-scrollbar-button {
5 /** */
7::-webkit-scrollbar-track {
8 /** */
10::-webkit-scrollbar-track-piece {
11 /** */
13::-webkit-scrollbar-thumb {
14 /** */
16::-webkit-scrollbar-corner {
17 /** */
19::-webkit-resizer {
20 /** */

It means at least itโ€™s working on Chrome, Safari, Opera, Edgium (Edge based on WebKit for iOS and Blink for Android, Windows and MacOS) and and less known such as Vivaldi and others.

โœ… Gecko

Since Firefox 64 was released, scrollbar customisation is now available.

I remind you, that original bug was reported 18 years ago, only less than 1 year ago implementation of CSS Scrollbars Module Level 1 was considered ๐Ÿ˜”.

Yet itโ€™s not working for me when you try this chunk of CSS:

Gecko CSS properties for scrollbar color and width
1.container {
2 scrollbar-color: rebeccapurple green;
3 scrollbar-width: 5px;

Check it in your FF, mine is not working with this.


However, if you try this, it works perfect:

Gecko CSS property for thin scrollbar
1.container {
2 scrollbar-width: thin;

Mac. On the left โ€” original size. On the right โ€” thin. Now you see the difference:

Mac, original size.
Mac, original size.
Mac, thin
Mac, thin

Same for Windows:

Windows, original size.
Windows, original size.
Windows, thin
Windows, thin

More information you can find on MDN: scrollbar-width and scrollbar-color.

If you are not familiar with it, probably forget about it. Itโ€™s IE11. Such a pain everywhere. Maybe not supporting it at all?

However, even it has CSS properties which might help:

Trident, only colour customisation
Trident, only colour customisation

Only colours ๐Ÿ”ด๐Ÿ๐Ÿ“˜ ughhhโ€ฆ

If you still need to customise colours, you can check the generator:

Trident, generator
Trident, generator

And also autohiding scrollbar property!!! Thanks ๐Ÿ™โšก

Another one is EdgeHTML which is a fork of Trident and used in old Edge. It had only enhancement (which is currently unavailable) in its backlog with medium priority to add support for scrollbar styling. But since Edgium release you can use Webkit / Blink pseudo elements ๐ŸŽ‰.

CSS Hacks and tricks

Slowly but surely we achieve what we want.

Scrollbar on the left

transform: with great support

direction: with great support

Hiding scrollbar

overflow, margin and padding

Turn scrollbar on with JS

Accepting the fact FF, Edge and IE do not support scrollbar customisation, JS library might be not bad solution for them.


Unfortunately some of libraries are plugins for jQuery: jScrollPane, nanoScroller. And this is not what can be a fit.

Bundle size

A size of scrollbar JS bundle should be worth it. However itโ€™s not what itโ€™s expected.

libminified (KB)minified + gzipped (KB)
๐Ÿ•ณ๏ธ size of black holeโˆžโˆž
๐Ÿค˜ light enough
๐Ÿ”ฅ too good to be true

Bundlephobia helps evaluating sizes of bundles.

Of course, good options are lightweight vanilla libraries.

Mobile support

Some of choices like simple-scrollbar provide scrollbars unfriendly for mobile devices. It is required to add a lot of functionality and therefore not production-ready.


slim-scroll is created by a stack overflow user and is aimed to improve design on Windows. Thatโ€™s good as macOS scrollbar looks good everywhere. However, native customisation is only available on WebKit and Blink.

Your implementation

Probably you want to customise you own scrollbar. First have a look at scrollbar mechanics.

  1. โญโญ๏ธ Google Developers: CSS Deep-Dive: matrix3d() For a Frame-Perfect Custom Scrollbar
  2. โญโญ๏ธ๏ธ CSDGN: Scrollbar Mechanics
  3. โญ๏ธ CSS Tricks: Custom Scrollbars in WebKit
  4. ๐Ÿ“„ MDN: CSS scrollbars
  5. ๐Ÿ“„ W3School: How To Create Custom Scrollbars
  6. ๐Ÿ“„ Stack Overflow: Hide scroll bar, but while still being able to scroll
  7. ๐Ÿ“„ Stack Overflow: Custom CSS Scrollbar for Firefox
  8. ๐Ÿ“„ Stack Overflow: CSS customized scroll bar in div


My last choice: to try perfect-scrollbar or simplebar.

Have a productive week ๐Ÿ’ช



Alexey Berezin profile image

Written by Alexey Berezin who loves London ๐Ÿด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ, players โฏ and TypeScript ๐Ÿฆบ Follow me on Twitter