Monday, November 25, 2013

CSS: How To Create Custom Scrollbar For Webkit Supported Browsers

One of eye catching thing of Gmail new updates was its scrollbar. First I thought it would be an html element represented by some kind of Javascript. But after some time I realized that it was not Javascript effect rather it is a CSS effects for scrollbars.



One amazing thing about this scrollbars are, they can be represented in different style for different HTML elements within same webpage.

Today we will see the implementation of such scrollbar for Webkit supported browsers.

First we will look at basic CSS properties of scrollbar.

::-webkit-scrollbar             
::-webkit-scrollbar-thumb       
::-webkit-scrollbar-track       
::-webkit-scrollbar-button      
::-webkit-scrollbar-track-piece 
::-webkit-scrollbar-corner      
::-webkit-resizer

Following image shows location these properties within scrollbar.


Now let’s look at the one basic example

            body{
                min-height: 1000px;
            }
            ::-webkit-scrollbar{
                width: 10px;
                margin:5px;
            }
            ::-webkit-scrollbar-track{
                background: #fff;
                -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);

            }
            ::-webkit-scrollbar-thumb{
                background: #aaa;
                box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
            }
            ::-webkit-scrollbar-thumb:hover{
                background: #888;
            }
            ::-webkit-scrollbar-thumb:active{
                background: #444;
            }




You can also customize scrollbars of overflow HTML elements, like this
 
<div id="custom-scrollbar">
            <div class="content">
                <!-- some HTML stuff -->
            </div>
        </div>

And CSS code

#custom-scrollbar {
                width: 20%;
                height: 300px;
                overflow: auto;
                background: #eee;
            }
            .content{
                height: 600px;
            }
            
            #custom-scrollbar::-webkit-scrollbar{
                width: 10px;
                margin:5px;
            }
            #custom-scrollbar::-webkit-scrollbar-track{
                background: #fff;
                -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
                border-radius: 10px;
            }
            #custom-scrollbar::-webkit-scrollbar-thumb{
                background: #F77;
                box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
                border-radius: 10px;
            }
            #custom-scrollbar::-webkit-scrollbar-thumb:hover{
                background: #A55;
            }
            #custom-scrollbar::-webkit-scrollbar-thumb:active{
                background: #744;
            }
Hope you would like this post.

Zainul Abedin Shaikh

Founder of Zainabed, Passionate about programming. Follow him on Twitter

And if you enjoyed this post, please consider sharing it on Facebook, Google+ or Twitter below