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-transiti         


        

Answer 1

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 even hack text-shadow for fun like I did, obviously not a production-ready approach but you can just override color in child container):

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

*::-webkit-scrollbar-thumb {        
  box-shadow: inset 0 0 0 10px;
}

div {
  overflow: auto;
  color: rgba(0, 0, 0, 0);
  transition: color .3s ease;
}

div:hover {
  color: rgba(0, 0, 0, 0.3);
}