Question

我想要一个自定义webkit滚动条来为悬停状态设置不同的背景颜色。下面的代码会更改悬停时的颜色，但不会为任何内容制作动画。它适用于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/

上提交一个错误

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

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

webkit-scrollbar是否可以与webkit-transition一起使用？

3 个答案: