Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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); 
}
Problem courtesy of: IMUXIxD

Solution

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;
$('body').mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    if(x>bodywidth-scrollwidth)
        $('body').addClass("auto");
    else
        $('body').removeClass("auto");
});

body
{
    margin:0;
    overflow:hidden;
}
.auto
{
    overflow:auto;
}
Solution courtesy of: trajce

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×