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

- Scrollwheelie

Answer 1

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

- Kinlan

---

谢谢。我已经为此提交了一个Radar错误报告。 - Scrollwheelie

@Trev：雷达漏洞是否已经公开，或者在 WebKit 的 Bugzilla 上有类似的漏洞我们可以跟踪？ - Adam M-W

仍未实施。 :( - marksyzm

Answer 2

使用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;
  }
}

- brillout

---

如果你在 Chrome 68.0.3440.106 中滚动，这会导致 ghosting。 - lazd

Answer 3

您仍然可以通过将-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;
}

- xb1itz