Scrollbar Customization

Defining styles for scrollbar is a rarity, they are not part of the W3C standard for css, and therefore most browsers simply ignore.

But there are Webkits that allow customization, in my tests I could not find one that would support all current browsers.

Custom Scrollbars in Webkit

In the above link you have an example, it will work in Google Chrome, but in others like Firefox and IE will not take effect.

I looked at W3C and found the following:

  

Currently, there is no way to scroll custom that is compatible with all browsers. The W3C article   Mention the following statement at the end on Friday August 07, 2015 at 6:50:04 PM:

Some browsers (IE, konqueror) support non-standard properties such as scrollbar-shadow-color , scrollbar-track-color , and others. These properties are illegal, they are not defined in any specification CSS nor are identified as proprietary (prefixing them with "-vendor -").

W3C Scrollbars Test

In this topic in the StackOverFlow and addressed this issue and one of the most assertive and use a plugin, Some of them:

iScroll

nanoScrollerJS

Using only CSS you can customize. But I think it does not work in IE (no version).

In this link link has step by step everything very well explained and with link to download the source code.

Ideally, you should only apply this to content within your website, as we can see here link .