Get Latest Tweaks via Facebook, Twitter, Google+ & FeedBurner
    Subscribe:
    Subscribe Twitter Facebook

    Thursday, March 1, 2012

    Using Custom Scrollbars On Your Site

    SOCIALIZE IT →

    custom scrollbar on your website

    Change your default scrollbar to make your site look pretty. make sure this custom scrollbar will only be shown in google chrome browser not in Mozilla firefox, opera and internet explorer.
    you just need to make simple changes on your css.

    Paste the following code before </head> .

    <style>
    
    ::-webkit-scrollbar {
    
    background: #1d1d1d;
    
    height: auto;
    
    width: 12px;
    
    }
    
    ::-webkit-scrollbar-button {
    
    background: #141414;
    
    }
    
    ::-webkit-scrollbar-button:hover {
    
    background: #151515;
    
    }
    
    ::-webkit-scrollbar-track {
    
    background: #1d1d1d;
    
    }
    
    ::-webkit-scrollbar-track-piece {
    
    background: #1d1d1d;
    
    }
    
    ::-webkit-scrollbar-thumb {
    
    background: #141414;
    
    border: 0;
    
    }
    
    ::-webkit-scrollbar-thumb:hover {
    
    background: #151515;
    
    }
    
    ::-webkit-scrollbar-corner {
    
    background: #1d1d1d;
    
    }
    
    ::-webkit-resizer {
    
    background: #141414;
    
    }
    
    </style>
    

    You can change colour as per your choice. for that use Colorpicker Tool


    1 comment:

    1. Awesome! Worked beautifully. Tweaked the style to suit me(made it look like Google's new scrollbars), and here is what it ended up looking like: http://teenageminimalist.blogspot.com/

      Thanks!!

      ReplyDelete