38

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

しかし、それは機能していません。または、同様の効果を (javascript なしで) 作成することは可能ですか?

これは、rgba 遷移の問題を示す jsfiddle です。

4

5 に答える 5

24

に加えて、Mari M の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;
  }
}
于 2016-08-03T15:44:09.507 に答える
15

ここでの返信に基づく別のアイデアを次に示します。background-color の代わりに color を使用してから box-shadow を使用して、つまみに色を付けることができます。-webkit-text-fill-colorテキストを元に戻すために使用できます。

https://codepen.io/waterplea/pen/dVMopv

*::-webkit-scrollbar-thumb {        
  box-shadow: inset 0 0 0 10px;
}

div {
  overflow: auto;
  -webkit-text-fill-color: black;
  color: rgba(0, 0, 0, 0);
  transition: color .3s ease;
}

div:hover {
  color: rgba(0, 0, 0, 0.3);
}
于 2017-09-19T15:45:16.133 に答える