webkit-scrollbar与webkit-transition一起工作吗？

Question

我想要一个自定义的webkit-scrollbar来为悬停状态设置不同的背景颜色。下面的代码改变了鼠标悬停时的颜色，但没有任何动画效果。它可以在div上工作，所以我怀疑webkit-scrollbar在转换时不能很好地发挥作用。

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

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

Answer 1

不，它没有实现。我们应该在http://bugs.webkit.org/上提交一个bug

Answer 2

您仍然可以通过将-webkit-scrollbar-thumb背景颜色设置为inherit来应用过渡，并将过渡应用于父元素-在本例中为滚动条容器本身。

唯一的缺点是，你必须创建一个内部容器来遮罩它的父颜色，并将滚动条轨迹背景设置为相同的遮罩颜色。下面是一个示例：

设置容器颜色和过渡

.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;
}

Answer 3

除了-webkit-background-clip: text;之外，使用xb1itz的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;
  }
}