Scrollbar customisation

Native support

✅ Webkit and Blink

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

✅ Gecko

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

.container {
scrollbar-color: rebeccapurple green;
scrollbar-width: 5px;
}
.container {
scrollbar-width: thin;
}
Mac. On the left — original size. On the right thin. Now you see the difference
Same for Windows.

❌ Trident-related

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

Only colours 🔴🍏📘 ughhh…
link: http://www.spectrum-research.com/V2/projects_scrollbar_generator.asp

CSS Hacks and tricks

Slowly but surely we achieve what we want.

Scrollbar on the left

transform: https://jsfiddle.net/4yd7bg2r/5/ with great support

Hiding scrollbar

overflow, margin and padding: horizontal https://jsfiddle.net/4yd7bg2r/8/ and vertical https://jsfiddle.net/4yd7bg2r/7/

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.

Library-independent

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.

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.

Platform-oriented

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.

--

--

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