La barra di scorrimento webkit funziona con la transizione del webkit?

Question

Desidero una barra di scorrimento Webkit personalizzata per animare un colore di sfondo diverso per lo stato di passaggio del mouse. Il codice sotto cambia il colore al passaggio del mouse ma non anima nulla. Funziona su un div, quindi sospetto che la barra di scorrimento webkit non giochi con le transizioni.

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

::-webkit-scrollbar-thumb:hover { 
    background-color: #f6f6f6; 
} 

Answer 1

No, non è implementata. Dovremmo aprire un bug su http://bugs.webkit.org/

Answer 2

È ancora possibile applicare la transizione impostando la -webkit-scrollbar-thumb background-color a inherit e applicare transizione verso elemento padre - in questo caso il contenitore barra di scorrimento stesso.

L'unico inconveniente è che, si deve creare un contenitore interno che mascherare il suo colore genitore e impostare lo sfondo pista barra di scorrimento per lo stesso colore di mascheramento. Qui è un esempio:

colori Set di container e di transizione

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

.container:hover { 
    background-color: #cfcfcf; 
} 

.container .inner { 
    background-color: #FFFFFF; 
} 

colori Set scrolbar

::-webkit-scrollbar-thumb { 
    background-color: inherit; 
} 

::-webkit-scrollbar-track { 
    background: #fff; 
} 

Answer 3

E 'abbastanza facile da raggiungere usando background-color: inherit; tecnica di xb1itz in aggiunta con -webkit-background-clip: text; .

Demo in diretta; 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; 
    } 
}