css – 在:: – webkit-scrollbar上使用转换？

是否可以在webkit滚动条上使用转换？
我试过了：

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,1);
}

但它不工作.
还是可以创建一个类似的效果(没有javascript)？

Here is a jsfiddle showing the rgba transition problem

解决方法

使用Mari M的背景颜色实现相当容易：继承;技术除了-webkit-background-clip：text ;.

现场演示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);
    -webkit-background-clip: text;
    transition: background-color .8s;
  }
  .container:hover {
    background-color: rgba(0,0.18);  
  }
  .container::-webkit-scrollbar-thumb {
    background-color: inherit;
  }
}

原文地址：https://www.jb51.cc/css/214712.html