CSS webkit scrollbar show/hide

Question

I'm using -webkit-scrollbar and what I want to happen is the scrollbar hidden on page load, and it stays hidden until you hover over the container div it is attached to. When you are hovering over a scrollable area, it would appear.

I tried adding :hover and :focus affects to various divs and rules in my CSS with no luck.

Is there a way to do what I'm referring to using -webkit-scrollbar? I could post code, but its pretty straightforward. Just one outer div with the css rules attached to it, then one inner div with set height and width. Then the css rules for -webkit-scrollbar.

#u #trail ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
#u #trail ::-webkit-scrollbar-button:start:decrement,
#u #trail ::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
    background-color: transparent;
}
#u #trail ::-webkit-scrollbar-track-piece {
    background-color: #FAFAFA;
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #999;
        -webkit-border-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #999;
    -webkit-border-radius: 8px;
}
#u #trail-overflow {
    width: 860px;
    max-height: 500px;
   overflow: auto;
}

Answer 1

I seem to have got through the auto hide thing in css. I somehow did it on my app, and was searching how I got it. Here it is, a modification to the existing fiddle by @tim

http://jsfiddle.net/4RSbp/165/

This does the trick:

body {overflow-y:hidden;}
body:hover {overflow-y:scroll;}

Answer 2

You can use simple CSS to achieve this.

Eg. if you have a div #content-wrapperthat scrolls with background-color: rgb(250, 249, 244);

#content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgb(250, 249, 244); /* Matches the background color of content-wrapper */
}

#content-wrapper:hover::-webkit-scrollbar-thumb {
  background-color: gray;
}

F.Y.I. You could set the thumb's opacity to zero (instead of matching the background color), but the opacity seems to then apply to other scrollbars on the page as well.

P.S. This assumes that you're ::-webkit-scrollbar-track's background color also matches the #content-wrapper's background color.

Answer 3

I ended up going with the slimscroll javascript plugin. It would be cool to have an all-css solution, but this plugin is done very well, and allows the focus-shown/hidden idea.

http://rocha.la/jQuery-slimScroll

Answer 4

Hiding the scrollthumb in webkit is non-intuitive! My page needed to hide all default browser scroll features in order to implement our own 'infinite scroll' effects. The only thing that was hard was the webkit "thumb" overlay, which only shows up while the screen is in motion (like scrolling with the mousewheel).

In order to hide this webkit scrollthumb we had to apply some styles to "all" scrollthumbs, and then apply the hiding effects to my specific thumbs (we have to do this programmatically because we're not sure if the content is long enough to do our custom scroll effects until the page has loaded).

These are the styles we used:

::-webkit-scrollbar { /* required, although an apparent no-op */
    color: inherit;
}
::-webkit-scrollbar-thumb { /* leave most bars alone */
    background-color: grey;
}
#customScrollDiv::-webkit-scrollbar-thumb { /* this is the one we care about */
    background-color: grey;
}
.hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/
    display: none; 
}       
.hideThumb { /* required, although an apparent no-op */
    background-color: white;
}

then, when i determine that i want to programmatically hide that thumbHandle i can do it with jquery: $('#customScrollDiv').toggleClass('hideThumb');

The tricky part is that you need a lot of "defaulting" of CSS styles that you normally got out of the box, but once you start specifying even one of these webkit styles above then you need THEM ALL or they won't be applied.