The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

CSS for scrollbar fade-out in Chrome?

Go down

CSS for scrollbar fade-out in Chrome? Empty CSS for scrollbar fade-out in Chrome?

Post by Guest August 19th 2012, 13:33

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

Code:
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!
avatar
Guest
Guest


Back to top Go down

Back to top

- Similar topics

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