horizontal - ¿Webkit-scrollbar funciona con webkit-transition?

webkit-scrollbar firefox

Question

Quiero un webkit-scrollbar personalizado para animar un color de fondo diferente para el estado de desplazamiento. El siguiente código cambia el color al pasar el mouse pero no anima nada. Funciona en un div, así que sospecho que webkit-scrollbar no funciona bien con las transiciones.

::-webkit-scrollbar-thumb {
background-color: #a8a8a8;
-webkit-transition: background-color 1s linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #f6f6f6;
}

Answer 1

Aún puede aplicar su transición configurando su -webkit-scrollbar-thumb background-color para inherit y aplicar la transición al elemento padre: en este caso, el contenedor de la barra de desplazamiento.

El único inconveniente es que tiene que crear un contenedor interno que enmascararía su color primario y establecer el fondo de la pista de la barra de desplazamiento en el mismo color de enmascaramiento. Aquí hay un ejemplo:

Establecer los colores del contenedor y la transición.

.container {
-webkit-transition: background-color 1s linear;
background-color: #fff;
}
.container:hover {
background-color: #cfcfcf;
}
.container .inner {
background-color: #FFFFFF;
}

Establecer colores scrolbar

::-webkit-scrollbar-thumb {
background-color: inherit;
}
::-webkit-scrollbar-track {
background: #fff;
}

Answer 2

Es bastante fácil de lograr utilizando el color de background-color: inherit; de xb1itz background-color: inherit; técnica además con -webkit-background-clip: text; .

Demo en vivo; 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;
}
}

Answer 3

No, no está implementado. Deberíamos presentar un error en http://bugs.webkit.org/