CSS for scrollbar fade-out in Chrome?
Page 1 of 1
CSS for scrollbar fade-out in Chrome?
This is the code I'm currently using for the scrollbar in Chome :
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!
- 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!
Guest- Guest
Similar topics
» fade out
» Fade out picture/scrollbox
» fade edges
» jquery hover fade in/out
» Fade-IN Effect of images
» Fade out picture/scrollbox
» fade edges
» jquery hover fade in/out
» Fade-IN Effect of images
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum