...
CSS

How to create custom scrollbar in WebKit browser

28 March 2019

I illustrate the one of the most prominent feature of webkit browsers. For this type of browsers you can change the scrollbar design as your own way.
Here, I’ll show you how to create custom scrollbar using css only no longer required any js or javascript plugin.

Note: This code will work only for WebKit browsers. For example safari, chrome etc.

To make a really simple custom scrollbar we could do this:

CSS:

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

These are the pseudo elements themselves. The actual parts of the scrollbars.

Output:

Leave a Comments