use transition on ::-webkit-scrollbar?

Question

is it possible to use transitions on webkit scrollbars? I 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 it isn't working. Or is it possible to create a similar effect (without javascript)?

Here is a jsfiddle showing the rgba transition problem

Answer 1

It is fairly easy to achieve using Mari M's background-color: inherit; technique in addition with -webkit-background-clip: text;.

Live demo; https://jsfiddle.net/s10f04du/

@media screen and (-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;   } } 

Answer 2

Here's another idea based on replies here. You can use color instead of background-color and then box-shadow to colorize the thumb. You can use -webkit-text-fill-color to color back the text:

https://codepen.io/waterplea/pen/dVMopv

*::-webkit-scrollbar-thumb {           box-shadow: inset 0 0 0 10px; }  div {   overflow: auto;   -webkit-text-fill-color: black;   color: rgba(0, 0, 0, 0);   transition: color .3s ease; }  div:hover {   color: rgba(0, 0, 0, 0.3); }