css - 在::-webkit-scrollbar 上使用过渡？

Question

是否可以在 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,204,102,1);
}

但它不起作用。 或者是否可以创建类似的效果(无需 javascript)？

Here is a jsfiddle showing the rgba transition problem

Answer 1

除了使用 -webkit-background-clip: text; 之外，使用 Mari M 的 background-color: inherit; 技术相当容易实现。

现场演示； 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;
  }
}