webkit滚动条是否与webkit转换一起工作？

我想要一个自定义webkit滚动条为悬停状态设置不同背景颜色的动画。下面的代码更改悬停时的颜色，但不设置任何动画。它在div上工作，所以我怀疑webkit滚动条不能很好地处理转换

::-webkit-scrollbar-thumb {
    background-color: #a8a8a8;
    -webkit-transition: background-color 1s linear;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #f6f6f6;
}

---

不，它没有实施。我们应该在

上提交一个bug。您仍然可以通过将

-webkit scrollbar thumb

背景色设置为

inherit

并将转换应用于父元素（在本例中为scrollbar容器本身）来应用转换

唯一的缺点是，您必须创建一个内部容器来屏蔽其父颜色，并将滚动条轨迹背景设置为相同的屏蔽颜色。这是一个例子：

设置容器颜色和过渡

.container {
  -webkit-transition: background-color 1s linear;
  background-color: #fff;
}

.container:hover {
  background-color: #cfcfcf;
}

.container .inner {
  background-color: #FFFFFF; 
}

设置阴囊颜色

::-webkit-scrollbar-thumb {
  background-color: inherit;
}

::-webkit-scrollbar-track {
  background: #fff;
}

---

使用xb1itz的

背景色：inherit相当容易实现技术加上
-webkit背景剪辑：文本

现场演示

你找到答案了吗？谢谢。我为此提交了一个雷达bug。@崔佛：雷达bug是公开的吗？或者它在webkit的bugzilla上有类似的bug供我们遵循吗？仍然没有实现：（如果滚动，至少在Chrome 68.0.3440.106中会出现重影。
@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;
  }
}