paint-brush
The Scrollbar Customization in CSS and JS (2024 Update)โ€‚by@beraliv
344 reads
344 reads

The Scrollbar Customization in CSS and JS (2024 Update)

by Alexey BerezinJune 7th, 2024
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

This article compiles all solutions for scrollbar customisation in one place. For CSS solutions, it covers relevant CSS properties and pseudo-elements, browser support, bug links and workarounds for edge cases. For JS solutions, it evaluates the majority of existing libraries based on 6 selection criteria and also offers the option to write your own implementation.
featured image - The Scrollbar Customization in CSS and JS (2024 Update)
Alexey Berezin HackerNoon profile picture

In 2018, I wrote a Medium article about scrollbar customization, which is now outdated ๐Ÿฆ•


In 2020, I revisited the topic and published an updated version on my blog. However, that too has become outdated ๐Ÿ˜…


Therefore, Iโ€™ve decided to investigate the current state of scrollbar customization, focusing on CSS support, and existing JS libraries and expanding the criteria for my selection.


One day, designers present you with stunning mock-ups ๐ŸŒ  featuring custom macOS-like scrollbars that look like in the screenshot above.


But perhaps on the left, smaller or larger, with varying indents depending on whether itโ€™s a mobile ๐Ÿ“ฑ, desktop ๐Ÿ–ฅ๏ธ, or TV screen ๐Ÿ“บ. Asking for more? The reality is ... that scrollbar customization hasn't evolved much since the late 90s. When I wrote the first version of the article in 2018, it was still a PITA. Has the situation improved since then?

CSS Customization Support

โญ๏ธ Standard Properties scrollbar-color & scrollbar-width

First and most importantly, the CSS Scrollbars Styling Module Level 1 draft added 2 properties, scrollbar-color and scrollbar-width


.container {
  scrollbar-color: rebeccapurple green; /** auto | dark | light | <color>; */
  scrollbar-width: 5px; /** auto | thin | none | <length>; */
}

JSFiddle to test it in your browser: https://jsfiddle.net/beraliv/4yd7bg2r/14/ ๐Ÿ๏ธ


.container {
  scrollbar-width: thin;
}

JSFiddle to test it in your browser: https://jsfiddle.net/beraliv/4yd7bg2r/15/ ๐Ÿ๏ธ


A quick insight on how it looks. On the left - original width. On the right - thin. Now, you can see the difference:

MacOS

Windows

At the moment of writing (May 31, 2024), the support was:


As of May 31, 2024, the CSS Scrollbars test suite included in the draft showed perfect scores, with Chrome, Edge, and Firefox passing all 113 subtests. In contrast, Safari passed only 54/113 subtests, failing to meet even half of them.

Showing 55 tests (83 subtests) in css/css-scrollbars from the latest master test runs for chrome[experimental], edge[experimental], firefox[experimental], safari[experimental]

For more information, please go to MDN web docs: scrollbar-width and scrollbar-color.

โญ๏ธ Standard Property scrollbar-gutter

Additionally, the scrollbar-gutter property has been included in the CSS Overflow Module Level 3 draft.

.container {
  scrollbar-gutter: stable both-edges; /** auto | stable && both-edges, where both-edges is optional */
}


JSFiddle to test it in your browser: https://jsfiddle.net/beraliv/9ogfhyLj/7/ ๐Ÿ๏ธ


At the moment of writing (May 31, 2024), the support was:


For more information, please go to MDN web docs: scrollbar-gutter. It is also slightly extended in the CSS Overflow Module Level 4 draft to solve additional use cases.

As the MDN web docs state, this feature is non-standard and is not on a standards track. Try to avoid it unless youโ€™re absolutely sure what youโ€™re doing.


You can use the following pseudo-elements to customize various parts of the scrollbar for WebKit and Blink browsers:

::-webkit-scrollbar {
  /** the scrollbar */
}
::-webkit-scrollbar-button {
  /** the up- and down- arrow buttons on the scrollbar */
}
::-webkit-scrollbar-track {
  /** the progress bar track of the scrollbar */
}
::-webkit-scrollbar-track-piece {
  /** the progress bar track NOT covered by the handle */
}
::-webkit-scrollbar-thumb {
  /** the draggable scrolling handle */
}
::-webkit-scrollbar-corner {
  /** the bottom corner of the scrollbar, where both horizontal and vertical scrollbar meet */
}
::-webkit-resizer {
  /** the draggable resizing handle that appears at the bottom corner of some elements */
}


At the moment of writing (May 31, 2024), the support was:

  • โœ… Chrome 2, Edge 79, Chrome Android 18, and WebView Android 37 - from MDN web docs
  • โŒ Firefox (as itโ€™s not WebKit or Blink)
  • โœ… Opera 15 & Opera Android 14 - from MDN web docs
  • โœ… Edgium (Edge based on WebKit for iOS and Blink for Android, Windows, and MacOS) - although itโ€™s already deprecated โ›”๏ธ
  • โœ… Samsung Internet 1.0 - from MDN web docs
  • โœ… Safari 4 & Safari iOS 3-12.2 - from MDN web docs (although some ::-webkit-resizer & ::-webkit-scrollbar will be supported for later Safari iOS versions)


A small note that when scrollbar-color OR scrollbar-width have a value other than auto, they will override the ::-webkit-scrollbar-* pseudo styling - mdn/content PR. Feel free to use @supports for a fallback to work around it. An example - Chrome for Developers: Scrollbar Styling


If youโ€™d like to cover the absence of some pseudo-elements in Firefox, you can use scrollbar-color and target Firefox using @-moz-document. You can check the examples at https://stackoverflow.com/a/78241393/3745332.

โŒ Non-Standard Properties or ::-moz-* Pseudo-Elements for Gecko Browsers

As of May 31, 2024, there are no ::-moz-* pseudo-elements available that could be used in Mozilla Firefox. Search in MDN web docs - https://developer.mozilla.org/en-US/search?q=%3A%3A-moz-scrollbar

โŒ Non-Standard Properties for Trident Browsers

If youโ€™re not familiar with what Trident is, the Trident (or MSHTML) is a proprietary browser engine for the Microsoft Windows version of Internet Explorer, developed by Microsoft. The latest Trident version was 7.0 (which was used in IE11). Luckily IE has been replaced by Edge.


Do you still support it? Iโ€™m sorry that you have to deal with IE in 2024. The good news is that Trident had plenty of non-standard CSS properties (i.e., browser-compat-data css/properties). The bad news is all of them control colors.


The list is here:


If you still need to customize colors, you can save some time using the generator:

Trident, color generator


IE10 and IE11 could autohide scrollbar using -ms-overflow-style property:

.container {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

This is very useful, thanks ๐Ÿ‘


In 2015, Microsoft introduced MS Edge; under the hood, it used EdgeHTML (it was a fork of Trident), and it had scrollbar styling enhancements in the backlog with medium priority. But we know that the scrollbar styling support was never completed.


Instead, MS Edge was replaced with the newer MS Edge (aka Edgium). The transition was completed by April 2021. Now, you can use Webkit / Blink pseudo-elements ๐ŸŽ‰

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

direction: https://jsfiddle.net/4yd7bg2r/6/ with great support

Hiding Scrollbar

overflow, margin and padding

JS Solutions

At this point, you may have different reasons to consider JS as a possible option:

  • Current scrollbar customization options are not sufficient for your mock-ups (i.e., you need a different track area on Windows), and you need more control over the scrollbar UI.


  • Older browsers that donโ€™t have scrollbar customization (e.g., Firefox 63-, Internet Explorer, old MS Edge, etc.)


  • Non-browser devices that donโ€™t have scrollbar customization (e.g., older Living Room devices, Set-top boxes, Consoles, etc.)


  • Proprietary browsers with no scrollbar customization (no examples, but why not?)

Library-Dependent Solutions

Originally, I was focusing on library/framework-independent implementation but in case itโ€™s what you need, here is the list for you.

lib

minified (kB)

minified + gzipped (kB)

notes

jQuery plugins




[email protected]

41.7

12.5

๐Ÿ”ด Unmaintained

[email protected]

15.7

5.2

๐Ÿ”ด Unmaintained

[email protected]

8.3 (approx.)

3.2 (approx.)

๐Ÿ”ด Unmaintained

React libraries




[email protected]

60.6

14.8

๐ŸŸ  Last published 2 years ago

[email protected]

23.7

7.1

๐Ÿ”ด Unmaintained

[email protected]

23.1

6.1

๐Ÿ”ด Unmaintained

@ez-kits/[email protected]

11.9

2.9

๐ŸŸข Last published 11 days ago

[email protected]

2.1

0.9

๐ŸŸข Last published 2 months ago

Vue libraries




[email protected]

64.6

19.1

๐ŸŸข Last published 8 months ago

[email protected]

22.8

7

๐ŸŸ  Last published 2 years ago

[email protected]

19.9

5.9

๐ŸŸข Last published 2 months ago

[email protected]

19.6

5.8

๐ŸŸ  Last published 2 years ago

[email protected]

13.6

4.6

๐Ÿ”ด Unmaintained

@ez-kits/[email protected]

11.6

2.8

๐ŸŸข Last published 11 days ago

Svelte libraries




[email protected]

15.2

5.7

๐ŸŸ  Last published 2 years ago

[email protected]

13.7

4.8

๐Ÿ”ด Unmaintained

[email protected]

11.3

4.2

๐Ÿ”ด Unmaintained

[email protected]

2.9

0.8

๐Ÿ”ด Unmaintained

Angular libraries




[email protected]

66.8

16.8

๐Ÿ”ด Unmaintained and deprecated

[email protected]

54.6

9.6

๐ŸŸข Last published 1 day ago
๐Ÿž Bundlephobia incorrectly shows bundle size
for latest version

@rdkmaster/[email protected]

48.2

11.7

๐ŸŸข Last published 2 months ago

[email protected]

14.9

3.9

๐Ÿ”ด Unmaintained

Solid libraries




[email protected]

12.7

4.1

๐Ÿ”ด Unmaintained

@ez-kits/[email protected]

11.4

2.8

๐ŸŸข Last published 11 days ago

Bundle Size of Library-Agnostic Solutions

Before choosing a library, itโ€™s important to check its bundle size. I used Bundlephobia to help with this evaluation. Here kB is 1000 bytes.

lib

minified (kB)

minified + gzipped (kB)

notes

๐Ÿ•ณ๏ธ size of black hole

โˆž

โˆž


[email protected]

94.1

30.2

๐ŸŸข Last published 1 month ago
๐ŸŸก +30kB minified and +11kB gzipped
sincev5.3.0 (4 years ago)

[email protected]

53.8

17.8

๐ŸŸก Last published 1 year ago

[email protected]

29.2

14

๐ŸŸข Last published 7 days ago

[email protected]

32.1

8.3

๐Ÿ”ด Unmaintained and deprecated

[email protected]

18

5.3

๐ŸŸ  Last published 2 years ago

๐Ÿค˜ light enough




[email protected]

4.2

1.8

๐Ÿ”ด Unmaintained (GitHub repo)

๐Ÿ”ฅ too good to be true




[email protected]

2.3

0.9

๐Ÿ”ด Unmaintained


Of course, good options are lightweight vanilla libraries.

Unmaintained Libraries

Many libraries that I collected in 2018 (6 years ago) have been either deprecated (e.g., iscroll) or unmaintained for more than 6 years (simple-scrollbar - last published 6 years, slim-scroll - last published 7 years ago).

Mobile Support

Some unmaintained libraries are not mobile device-friendly. Please make sure it works across the mobile platforms, otherwise, it will not fit in your case. All the maintained libraries (such as overlayscrollbars, smooth-scrollbar & simplebar) seem to have a mobile support which is great ๐Ÿ‘

Tree-Shaking Support

Itโ€™s not critical when the library is small and tree-shaking isnโ€™t available. However, when the library is huge (e.g., [email protected] is 94kB minified), it might be wise to remove unused code to reduce network load for your users.


From the list we have above, only overlayscrollbars has tree-shaking support.

Performance

The next crucial KPI metric is performance. While it would be ideal to have performance measurements, they can be browser-specific. Instead, I suggest focusing on the features description (i.e., look for terms like โ€œreflowsโ€ and โ€œpollingโ€), and if possible, reviewing the code to understand its behavior. Itโ€™s always beneficial to understand the behavior to make it even better.


From the list above, simplebar & overlayscrollbars highlight the impact on performance. As a side note, it could be beneficial for other libraries to include performance advantages in their README (even if they seem obvious).

Write Your Implementation

The last resort is to do it from scratch. Before start designing the approach, kindly have a look at scrollbar mechanics.


Itโ€™s also valuable to read the scrollbar library docs. Some of the ones that I really enjoyed reading:


  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 the 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

Conclusion

Since 2022, Iโ€™ve moved away from perfect-scrollbar (unmaintained for 2 years now) and simplebar (too heavy) to overlayscrollbars. Itโ€™s lightweight (only 29.2kB), performant (though subjective without actual measurements), supports mobile devices, supports tree-shaking, and offers numerous library integrations (i.e., React, Vue, Angular, Svelte, and Solid).


Hope the article has helped you with your choice!


Cheers ๐Ÿ‘‹