Using Custom scrollbars in your website can be really eye-catching and they go well with the website’s design. For web designers, it’s difficult creating them with JavaScript. Instead, you can create custom scrollbars using CSS. According to my acknowledge, it only worked in Internet Explorer. During my recent project, my client required the scrollbar to be stylized with CSS, and make it work in most mainstream browsers. So after a bit of googling, I found the tricks to do so and share them with you here.

Custom scrollbars for Internet Explorer

In case you don’t know what these attributes mean, here is the scrollbar map that will help you understand.

custom scrollbar map for Internet Explorer

Use the above code for the tags you want to stylize, or use it in body, to stylize all scrollbars in the document. If you’re lazy enough to customize by yourself, there are some code generator you can use, this Custom Scrollbars Generator is nice.

Custom scrollbars for Chrome

There’s also a scrollbar pieces map for you:

custom scrollbar map for Chrome

Obviously, Chrome and webkit based browsers can do more custom work than IE, not just colors, you can apply radius, transparency on scrollbars, that’s way more flexible than IE.

Custom scrollbars for Firefox

The CSS code above for Firefox is a little different. But it can generate same custom scrollbars like Chrome do. And by using orient=”vertical” you can apply different styles for verticle and horzontal scrollbars, sounds like fun.

Though the css way of customization is simple, it does look a bit rough. Alternatively, you can use javascript-based scrollbars which give you more custom options. Remeber, it’s not necessary to change your website scrollbars, you should keep the design simple, not too fancy.