IMUXIxD IMUXIxD - 2 years ago 102
Javascript Question

Make scroll-bar appear on hover of scroll-bar-track

I'm using the custom scroll-bar styles via CSS to implement custom scroll-bars in webkit. If other browsers have implemented prefixed or the unprefixed versions/version please let me know.

But, on to my question. Is there a way I can make the scroll-bar appear on hover of the scroll-bar-track?

Kind of like in Mac OS X Lion and Mountain Lion ?

Here is my CSS for the custom scroll-bars"

::-webkit-scrollbar {
width: 12px;

/* 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);

Answer Source

Here is a jquery solution, since you mentioned it that you need it to show when you hover on it. Check this fiddle

var bodywidth = $('body').width();
var scrollwidth = 10;
    var x = e.pageX - this.offsetLeft;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download