CSS for scrollbar fade-out in Chrome?

Go down

CSS for scrollbar fade-out in Chrome?

Post by Alexander Moore on August 19th 2012, 12:33 pm

This is the code I'm currently using for the scrollbar in Chome :

html {
    overflow: auto;
body {
    position: absolute;
    top: 0px;
    left: 3px;
    bottom: 0px;
    right: 0px;
    padding: 30px;
    overflow-y: scroll;
    overflow-x: hidden;
::-webkit-scrollbar {
    width: 9px;
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 9px;
    border-radius: 9px;
    background: rgba(102, 102, 102, 0.75);
    -webkit-box-shadow: inset 15 15 15px rgba(0,0,0,0.7);
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
::-webkit-scrollbar-thumb:hover {
    background: rgba(51, 51, 51, 0.75);
::-webkit-scrollbar-thumb:window-inactive {
 background: rgba(255,0,0,0.4);

How can I make it so that the scrollbar is slightly transparent and fades out when the user stops using his/her mouse and/or scrolling with the mouse wheel, and grows slightly larger in width when a user hovers over the scrollbar? I believe it has something to do with the transition codes that I'm still figuring out.

Extra : If you know it off the top of your head, how can I translate this into code for IE / Opera / Safari? Most of my users are using either Chrome for Firefox (and Firefox does not support custom scrollbars) so I'm not so worried about that right now, in fact the site doesn't even run well in IE and I need to work around with it (currently I've set a dialog box to appear for IE users telling them about the issue and to change browsers), but I'd like to know how to translate it into code that those browsers support.

Thanks in advance!
Alexander Moore

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Back to top

Permissions in this forum:
You cannot reply to topics in this forum