How to create a responsive custom scrollbar using CSS

Not every page on my blog, but this particular page has a custom scrollbar. Look at the scrollbar carefully. Yes, its different from a default scrollbar. Its a custom designed scrollbar. I'll show you how to create a cool responsive custom scrollbar using pure CSS.

Create responsive custom scrollbar using css

Scrollbars are very common. You will see it in a web page, in elements like <div> or <p> etc.

If you want to add a scrollbar to an element like a <div>, you’ll have to use the CSS overflow property. Scrollbars can be vertical (Y-axis) or horizontal (X-axis). Implementing a custom scrollbar to elements is the same.

In this example, I’ll create vertical custom scrollbar on a <div>, which is just 5px wide.

<style>
    .scroll {
        overflow-y: scroll;
        height: 130px;
        width: 300px;
        background-color: #fff;
        margin: 0 0 10px 0;
    }
    .scroll::-webkit-scrollbar {
        width:5px;
    }
    .scroll::-webkit-scrollbar-track {
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); 
        border-radius:5px;
    }
    .scroll::-webkit-scrollbar-thumb {
        border-radius:5px;
        -webkit-box-shadow: inset 0 0 6px red; 
    }
</style>

<body>
    <div class="scroll">
        We often use the !important property in CSS to ignore rules or styles 
            applied to an element and instead apply rules that has !important property. 
                You can further override the !important rules using ...
    </div>
</body>

Try it

Now, let me explain all the CSS pseudo-elements that I have used inside the <style> tag. The ::-webkit-scrollbar is used to style an element’s scrollbar.

• ::-webkit-scrollbar – Here I have specified the width of scroll bar, which is 5px. You can change the pixel according to your choice.

• ::-webkit-scrollbar-track – In here I have assigned some values for the track. The track is where the scroll bar moves up and down. You can change the rgba() value to, let’s say, green and see how it looks. For example,

rgba(255,10,0,0.5)

Note: The rgba() function defines colours using red, blue, green and alpha. The alpha specifies opacity.

• ::-webkit-scrollbar-thumb – Here I have assigned the values for the bar or the thumb. Its red in colour.

See this here

In-addition, you can use create a custom hover effect. For example,

.scroll::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 0 0 6px green; 
}

You can apply the same method on a web page, on elements like <p> or <section> etc.

By the way, here's the CSS for custom scrollbar that is on this page.

.scroll::-webkit-scrollbar {
    width: 20px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 0 rgba(0,0,0,0.3); 
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px; 
    background: -webkit-gradient(linear,left top,left bottom,from(red),to(orange));
    -webkit-box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), 
        inset -2px -2px 2px rgba(0,0,0,.25);
}

<body class="scroll">
    ...
</body>

← PreviousNext →