Custom scrollbar styles, hide bar unless scrolling

Question

I want the functionality of a MAC scrollbar on a Windows browser.

At the moment the code is showing the bar at all times on the MAC, ideally i want the scrollbar to only be visible when you actually scroll rather then it being constantly there.

::-webkit-scrollbar {
    width: 8px;
}

 /* Track */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
 }

 /* Handle */
::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

 ::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(255,0,0,0.4); 
}

Any ideas?

Answer 1

It's not simple pure css cross-browser solution.

You should use a javascript library for that, I suggest you nicescroll:
http://areaaperta.com/nicescroll/

or for more customization, jscrollpane:
http://jscrollpane.kelvinluck.com/