How to make a scrollbar disappear when not actively scrolling?

Question

I have custom styled my scroll bar in Chrome with the following CSS.

::-webkit-scrollbar {
    padding: 1px;
    width: 7px;
    background: none;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    -webkit-border-radius: 1ex;
}

This gives me a nice scrollbar that resembles the default Chrome scrollbar, but colored white (as opposed to a translucent black).

When I do this, however, I lose the property of only having the scroll bar show up when I am actively scrolling in the div.

Is there a way to get this functionality of the default scrollbar using only CSS?

Answer 1

Try this: http://jsfiddle.net/lotusgodkk/eR9SP/70/

CSS:

.scroller::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.scroller::-webkit-scrollbar-track {
    background: white;
}
.scroller::-webkit-scrollbar-thumb {
    background: #ddd;
    visibility:hidden;
}
.scroller:hover::-webkit-scrollbar-thumb {
    visibility:visible;
}
.scroller {
    overflow: auto;
    font: 16px/1.5 Arial;
    color: #444;
    border: 1px solid #ddd;
    margin: 20px;
    padding: 20px;
    max-width: 300px;
    height: 200px;
}

HTML:

<div class="scroller">Sample text</div>