css – 在:: – webkit-scrollbar上使用转换?

前端之家收集整理的这篇文章主要介绍了css – 在:: – webkit-scrollbar上使用转换?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以在webkit滚动条上使用转换?
我试过了:
div#main::-webkit-scrollbar-thumb {
    background: rgba(255,204,102,0.25);
    -webkit-transition: background 1s;
    transition: background 1s;
}

div#main:hover::-webkit-scrollbar-thumb {
    background: rgba(255,1);
}

但它不工作.
还是可以创建一个类似的效果(没有javascript)?

Here is a jsfiddle showing the rgba transition problem

解决方法

使用Mari M的背景颜色实现相当容易:继承;技术除了-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);
    -webkit-background-clip: text;
    transition: background-color .8s;
  }
  .container:hover {
    background-color: rgba(0,0.18);  
  }
  .container::-webkit-scrollbar-thumb {
    background-color: inherit;
  }
}

猜你在找的CSS相关文章