How to get Google-style scrollbars on your website with CSS

Posted by | April 24, 2012 | Development | One Comment

If you are anything like me, you’ll love the new design of Gmail and Google Docs as it is remarkably simple, clean and effective. Everything about the controls and navigation elements is precise, responsive and provides the best possible user experience. It is because of this intrinsic simplicity, that it is also easy to copy and to re-create these effects on your own website or blog.

Please note: These styles work on WebKit powered browsers only, such as Safari and Google Chrome.

Without further ado, here’s the code:

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #FFF;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
    background: #CCC;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover {
    background: #AAA;
}
::-webkit-scrollbar-thumb:active {
    background: #888;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

Simply copy and paste the above CSS code anywhere in your stylesheet, or inside a <style> tag in the <head> of your page. You will then see that the scrollbars of your browser window have changed and now look strikingly similar to those featured on Google products such as Gmail and Google Docs.

You may have noticed that Gmail and Google Docs also have elements within the page that remain a fixed size and scroll the content within them. This can also be achieved if you have included the above CSS code in the page already, by using a fixed height or width and the overflow: scroll CSS property.

The CSS

#container {
    height: 600px;
    width: 900px;
    overflow: scroll;
    overflow: scroll-y;
}

The HTML

Scrollable content goes here.

Adding the code above will create what appears to be a normal container for your content. If the content becomes too much to fit in the container, instead of hiding or the content or making the box expand, the browser will generate a scrollbar for the container. If used in combination with the scrollbar styling code, the scrollbars that appear will take on a Google-style scrollbar appearance.

If you want to know more about the CSS techniques used here, check out Chris Coyier’s fantastic in-depth article on CSS scrollbars.

Hello

    Find out more & get connected:
  • twitter

About admin

Hello

  • Jay

    Awesome post .. it works like a charm .. was looking for this since long time.
    Thank you very much