Customize Scrollbar With CSS - Style A Scrollbar Using HTML and CSS

Sameer Saini February 13, 2022
Customize Scrollbar With CSS - Style A Scrollbar Using HTML and CSS

We all have seen the old boring scrollbars on websites and they are the default grey scrollbars that browsers provide us.

Although they solve the purpose they are built for, sometimes having a custom CSS scrollbar makes a massive visual difference to the onlooker.

 Here's how a default scrollbar looks like 

Examples of Websites That Use Custom Scrollbar

Here are some examples of how the best websites use custom CSS scrollbars to their benefit. 

1. Youtube Studio


2. Codepen.io



Understanding How We Can Create A Custom CSS Scrollbar

For browsers that support WebKit, you can use the following commonly used pseudo-elements to customize the browser's scrollbar:

::-webkit-scrollbar - the scrollbar.
::-webkit-scrollbar-button - the buttons on the scrollbar
::-webkit-scrollbar-thumb - the draggable scrolling handle.
::-webkit-scrollbar-track - the track of the scrollbar.
::-webkit-scrollbar-track-piece - the track not covered by the handle.

Let's use these in a practical example and try to create a custom CSS scrollbar.

By adding these minimum styles to the pseudo-elements, we can achieve a stylish-looking custom CSS scrollbar that matches the design and color scheme of your website.

CSS


Output

Let's break down the above example and see what's happening in the CSS.

First, we need a container or the HTML body to be bigger than the screen height so that we see a default scrollbar. This is easy, just give the body tag a height of around 2000px or bigger.

Now, that we can see the default scrollbar, let's work on the pseudo-elements and style them.

First, we use the ::-webkit-scrollbar element and give it a width of something. In the example I have given it a thin width so that it looks fancy, wider scrollbars look quite old and boring but it could achieve something different if you have a vision.

Then, we have to style the background of the track. The track runs in the container which needs the scrollbar. Again, you can give it any color of your choice or something that matches your website.

Then, we work on the thumb. A thumb is the darker part of the scrollbar which you can hold and move to scroll faster. On this element, we will give it a background color, a width that can be the same as the track, smaller or bigger. To make it look different we can add some border styles to it too.

You can go ahead and add any thickness to the scrollbar and have the color scheme of your website and make it quite unique to the user.

CSS Code For Custom Scrollbar