webkit-scrollbar 是否与 webkit-transition 一起使用？答案

【问题标题】：Does webkit-scrollbar work with webkit-transition?webkit-scrollbar 是否与 webkit-transition 一起使用？
【发布时间】：2016-08-04 01:21:08
【问题描述】：

我想要一个自定义的 webkit-scrollbar 来为悬停状态设置不同的背景颜色。下面的代码会更改悬停时的颜色，但不会为任何内容设置动画。它适用于 div，所以我怀疑 webkit-scrollbar 不能很好地处理过渡。

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

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

【问题讨论】：

标签： webkit

【解决方案1】：

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

【讨论】：

谢谢。我为此提交了一个雷达错误。
@Trev：Radar 漏洞是公开的吗？或者它在 webkit 的 bugzilla 上有一个等价的漏洞供我们关注？
仍未实现。 :(

【解决方案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;
}

【讨论】：

【解决方案3】：

使用 xb1itz 的 background-color: inherit; 技术以及 -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,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;
  }
}

【讨论】：

如果您滚动，这会导致重影，至少在 Chrome 68.0.3440.106 中是这样。