Style website scrollbar or any scroller section - CSS - Codereplica - Web & Mobile App Development,E-commerce,Micro-Sites

Are you bored from traditional windows scrollbar or any section scrollbar design/style?

Let’s try some different style and experiment with scrollbar styles by just using CSS.

In the above animation you can see that how the by default scroller looks like, it’s may be your browser scroller or any scroll section in your website.

But with the help of CSS we can modify the styling of scroll bar. Yes, just by using a few line of css you can modify the style of scroll bar.

Let’s see those few lines of code –

::-webkit-scrollbar {
    width: 10px; /* this will change the width of scrollbar */
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #236cb6, #72a546); /* this is for changing the color of scrollbar thumb, you can use single color or gradient whatever you want */
    border-radius: 10px; /* this is for changing the border radius */
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; /* this is for changing the track style */
    border-radius: 10px; /* this is for changing the track border-radius */
}

Explanation :

For changing the scrollbar style we are using pseudo class of css. That’s are –

# ::-webkit-scrollbar

# ::-webkit-scrollbar-thumb

# ::-webkit-scrollbar-track

Only the above three pseudo class we can styles the scrollbar. If you use the above code it’ll change the style for all scrollbar of your website. And if you want different styles for each scrollbar section then just add your section class or id before these pseudo class.

See the result –