CSS scrollbar style cross browser [duplicate]

Question

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>

As of IE6 I believe you cannot customize the scroll bar using those properties. The Chris Coyier article linked to above goes into nice detail about the options for webkit proprietary css for customizing the scroll bar.

If you really want a cross browser solution that you can fully customize you're going to have to use some JS. Here is a link to a nice plugin for it called FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm