css - use transition on ::-webkit-scrollbar? -
is possible use transitions on webkit scrollbars? tried:
div#main::-webkit-scrollbar-thumb { background: rgba(255,204,102,0.25); -webkit-transition: background 1s; transition: background 1s; } div#main:hover::-webkit-scrollbar-thumb { background: rgba(255,204,102,1); } but isn't working. or possible create similar effect (without javascript)?
it easy achieve using mari m's background-color: inherit; technique in addition -webkit-background-clip: text;.
live demo; https://jsfiddle.net/s10f04du/
@media screen , (-webkit-min-device-pixel-ratio:0) { .container { overflow-y: scroll; overflow-x: hidden; background-color: rgba(0,0,0,0); -webkit-background-clip: text; transition: background-color .8s; } .container:hover { background-color: rgba(0,0,0,0.18); } .container::-webkit-scrollbar-thumb { background-color: inherit; } }
Comments
Post a Comment