Anything about customizing native scrollbar

Nowadays, even when you want to customize your list scrollbar. In this article, I would like to explain why I decided to use a native scrollbar beside any other scrollbar plugin, to have a fancy scrollbar that suits my template. Also, I talk about how to customize native scrollbar to make it fancy, and Pros and Cons of using the native scrollbar and customizing it.

The Story: Why I used a native scrollbar?

The story started from when I worked on a react project, and due to styles of that project we decided to customize the scroll styles so that it would be the same in any browser. As a result, we decided to use the tt-react-custom-scrollbars react plugin, which provided us with an amazing style for the scroll bar. But after about 5 months we recognized that this plugin was a bit laggy on some browsers, also it needed some customization to get matched with our containers, also it added some resources to our project. On the other hand, we couldn’t use it for the mobile version, as it became a bit laggy. So we searched for a new plugin, but after some time we found that it would be better to customize the native scrollbar instead of using a plugin.

How to customize?

Our target is Firefox, Chrome, and Safari. Thanks to CSS there are some properties and pseudo-elements, which provide us this feature. These properties and pseudo-elements are:

For Firefox you should use below properties as what Firefox mentioned about it but seems these two properties are not working correctly on Firefox. These properties work for Firefox of Windows and Linux OS.

• scrollbar-width :
• scrollbar-color :

And for Chrome, Safari, you should use these below pseudo-elements:

• ::-webkit-scrollbar: the background of the bar itself.
• ::-webkit-scrollbar-button : the directional buttons on the scrollbar.
• ::-webkit-scrollbar-track: the empty space “below” the progress bar.
• ::-webkit-scrollbar-track-piece: the top-most layer of the progress bar not covered by the thumb.
• ::-webkit-scrollbar-thumb: the draggable scrolling element resizes depending on the size of the scrollable element.
• ::-webkit-scrollbar-corner: the bottom corner of the scrollable element, where two scrollbars meet.
• ::-webkit-resizer: the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.

So you can refer to below image to see how these props work

Well to apply simple customization you can do as bellow

.custom-scroll {
  height: 170px;
  overflow-y: auto;
  position: relative;
  background: #efefef;
  border: 1px solid #dedede;
  border-radius: 4px;
  scrollbar-width: thin;
  scrollbar-color: #0A4C95 #C2D2E4;
}

.custom-scroll::-webkit-scrollbar {
  width: 4px;
  background: yellow;
}

.custom-scroll::-webkit-scrollbar-track {
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: red;
}

https://jsfiddle.net/shayanypn/bzr4hce0/41/

Pros and Cons?

In conclusion, although styling the native scroll wouldn’t work on all browsers, and devices (I mean mobile, that has a bit laggy behavior), but it seems to be a good solution for many cases, so regarding my experience, search, and tests, I can provide below a list

Pros

• Reduce your implementation code, any plugin, it at least adds some DOM element to your code to be able to handle the scrollbar
• Reduce the page resource, any plugin, it at least adds one JavaScript and one CSS resource to the page.
• Increase performance, any plugin, needs at least a few milliseconds to initial.

Cons

• Not all browsers support this.
• It sometimes has issues with mobile devices.

Finally

Finally, after we tested this customization in many cases and browsers, we found that Firefox makes restrictions for customizing the scrollbar. These CSS properties work fine in Chrome on Windows, Linux, and Mac, also it works on Safari, but on Firefox, it works only on Windows and Linux. Also, for mobile, in many cases, we experience some lagging issues, and after many tests, we decide to use a native scrollbar without any customization, that’s the only case that works fine.

Resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar