The creation of the scroll bar is displayed when you scroll the scroll bar

Question

I use custom scroll styles through CSS to implement custom scroll bars in webkit. If prefixes or intact versions / versions are implemented in other browsers, please let me know.

But, to my question. Is there a way to make the scroll bar appear when you hover over the scroll bar?

Like Mac OS X Lion and Mountain Lion?

Here is my CSS for custom scrollbars "

::-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 1

Here is a jquery solution, as you mentioned that you need to show it when you hover over it. Check 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; } 

Answer 2

EDIT: THIS RESPONSE MUST NOT REALLY WITH CURRENT BROWSERS

This is a simple matter of using the overflow-y property and displaying it with the body:hover pseudo-class. I also added some addition that will be hidden when hovering, so the text will not change when the scroll bar appears as a pad, when the hidden scroll bar takes up this space.
Fiddle: http://jsfiddle.net/J4gc9/1
CSS:

 ::-webkit-scrollbar { width: 12px; } body{ overflow-y:hidden; padding-right:12px; } body:hover{ overflow-y:scroll; padding-right:0px; } /* 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); }