Customize the Browser's Scrollbar with CSS

Custom scrollbars are getting popular, and you might have come across websites that have unique scrollbars, making the sites feel and look different. There are basically a few ways to implement a custom scrollbar. In this tutorial we will be using CSS3, which is the most straightforward way. However, there are jQuery plugins that can help with customizing scrollbar, but I do not like to add more JavaScript to my website. If you are a designer, photographer or you just want your website to have a cool scrollbar, go ahead with the jQuery plugins.

Note: You should know custom scrollbars are exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine.

You'll need to include the style.css file in the HTML file. You can type out the above HTML code or just copy and paste into your HTML file. :)

CSS Stylesheet (style.css)

Firstly, we set the .scrollbar (class) width, height, background-color, then set overflow-y: scroll to get the vertical scrollbar. We set min-height: 450px to the .force-overflow div so that the scrollbar appears (because we used the overflow-y property to scroll in .scrollbar class).

Since we know that scrollbar contains track, button and thumb, we are now going to give a stylish look to thumb. We use pseudo-element (i.e. ::-webkit-scrollbar-thumb) with webkit prefix and set scrollbar-thumb background- color.

. . .
#style-1::-webkit-scrollbar-thumb{background-color:#000000;}...

After that, the scrollbar looks like this:

Free Node eBook

Build your first Node apps and learn server-side JavaScript.

📧

Nice!

Check your email to confirm your subscription.

We use box-shadow on scrollbar-track to make it stylish and add contrast between the scrollbar and scrollbar-track.

Customized scrollbars aren’t uncommon anymore. You will find them in major websites and blogs, especially personal portfolio websites.

There are tons of jQuery plugins that can help with customizing scrollbar.

Custom scrollbars are exposed behind the -webkit vendor prefix.

Basic structure of a scrollbar.

Terminologies associated with scrollbars.

The CSS way of customizing scrollbars is simple, but looks a bit rough. However, operating systems like Windows, OS X and Linux have their own style for the scrollbar. This in return could lead to undesirable results and inconsistencies for your design. Remember, you should keep it simple, stupid (KISS), not too fancy.

I have created more scrollbars using the above procedure. I made use of codePen for the demo, and you can find the full code for this tutorial on CodePen.

That's all. I hope you like it!

Make sure to leave any thoughts, questions or concerns in the comments below. I would love to see them.