CSS scrollbar style cross browser [duplicate]

Webkit's support for scrollbars is quite sophisticated. This CSS gives a very minimal scrollbar, with a light grey track and a darker thumb:

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

This answer is a fantastic source of additional information.

Scrollbar CSS styles are an oddity invented by Microsoft developers. They are not part of the W3C standard for CSS and therefore most browsers just ignore them.

jScrollPane is a good solution to cross browser scrollbars and degrades nicely.

nanoScrollerJS is simply to use. I always use them...

Browser compatibility:

• IE7+
• Firefox 3+
• Chrome
• Safari 4+
• Opera 11.60+

Mobile browsers support:

• iOS 5+ (iPhone, iPad and iPod Touch)
• iOS 4 (with a polyfill)
• Android Firefox
• Android 2.2/2.3 native browser (with a polyfill)
• Android Opera 11.6 (with a polyfill)

Code example from the Documentation,

1. Markup - The following type of markup structure is needed to make the plugin work.

<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>