Czy webkit-scrollbar działa z webkit-transition?

Question

Chcę niestandardowy pasek przewijania webkit do animowania innego koloru tła dla stanu hover. Poniższy kod zmienia kolor po najechaniu kursorem, ale nic nie animuje. Działa na div, więc podejrzewam, że webkit-scrollbar nie gra ładnie z przejściami.

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

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

Answer 1

Nie, to nie jest realizowany. Powinniśmy zgłosić błąd na http://bugs.webkit.org/

Answer 2

Nadal można zastosować przejścia, ustawiając -webkit-scrollbar-thumb background-color do inherit i zastosować przejście do elementu nadrzędnego - w tym przypadku samego pojemnika przewijania.

Jedyną wadą jest to, że należy utworzyć wewnętrzny pojemnik, który zamaskuje kolor macierzysty i ustawić tło paska śladu do tego samego koloru maskowania. Tutaj jest przykład:

Zestaw kontenerów kolory i przejście

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

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

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

Set scrolbar kolory

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

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

Answer 3

Jest to dość łatwe do osiągnięcia przy użyciu background-color: inherit; technikę xb1itz w uzupełnieniu z -webkit-background-clip: text; .

Demo na żywo; 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; 
    } 
}