在::-webkit-scrollbar上使用过渡? [英] use transition on ::-webkit-scrollbar?

问题描述

是否可以在Webkit滚动条上使用过渡? 我试过了:

is it possible to use transitions on webkit scrollbars? I tried:

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,204,102,1);
}

但是它不起作用. 还是有可能创建类似的效果(没有javascript)?

but it isn't working. Or is it possible to create a similar effect (without javascript)?

这里是一个显示rgba转换问题的jsfiddle

推荐答案

使用Mari M的background-color: inherit;技术以及-webkit-background-clip: text;相当容易实现.

It is fairly easy to achieve using Mari M's background-color: inherit; technique in addition with -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上使用过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！