Scrollbar customisation

Alexey Berezin
Oct 4, 2018 · 4 min read

One day some designers provide you with beautiful mock-ups 🌠 and … custom macOS-like scrollbars which look like:

Image for post
Image for post

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 2018 and it’s still a PITA.

Native support

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

It means at least it’s working on Chrome, Safari, Opera, Edge Mobile (both iOS and Android) and less known such as Vivaldi and others.


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:

.container {
scrollbar-color: rebeccapurple green;
scrollbar-width: 5px;

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


However, if you try this, it works perfect:

.container {
scrollbar-width: thin;
Image for post
Image for post
Image for post
Image for post
Mac. On the left — original size. On the right thin. Now you see the difference
Image for post
Image for post
Image for post
Image for post
Same for Windows.

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:

Image for post
Image for post
Only colours 🔴🍏📘 ughhh…
Image for post
Image for post

And also autohiding scrollbar property!!! Thanks 🙏⚡

Another one is EdgeHTML which is a fork of Trident and used in Edge. It has only enhancement in its backlog with medium priority to add support for scrollbar styling. Never be done 😞

CSS Hacks and tricks

Slowly but surely we achieve what we want.

transform: with great support

direction: with not bad support

overflow, margin and padding: horizontal and vertical

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.

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

lib / minified in KB / minified + gzipped in KB

🕳️ size of black hole
nanoscroller / 94.8 / 32.8 (with jQ)
iscroll / 32.1 / 8.3
perfect-scrollbar / 17.7 / 5.2
jscrollpane / 15.6 / 5.2
simplebar / 10–15 / 4.35
🤘 light enough
nanoscroller / 8.34 / 2.89 (without jQ)
slim-scroll / 4.2 / 1.8
🐥 too good to be ideal
simple-scrollbar / 2.3 / 0.94

Bundlephobia helps evaluating sizes of bundles.

Of course, good options are lightweight vanilla libraries.

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.

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

Have a productive week 💪

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

Alexey Berezin,
Graduate student from St Petersburg State University, Master’s
Front-end Developer from Yandex


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store