Nie można ustawić szerokości webkit-scrollbar-thumb

Question

Próbuję utworzyć niestandardowy pasek przewijania działający w przeglądarce Chrome i Safari. Próbowałem następujące CSS:

::-webkit-scrollbar { 
    width: 15px; 
} 

::-webkit-scrollbar-track { 
    background-color: rgba(100, 100, 100, .5); 
    width: 15px; 
} 

::-webkit-scrollbar-thumb { 
    background-color: #818B99; 
    border-radius: 9px; 
    width: 9px; 
} 

Jednak width na -webkit-scrollbar-thumb jest ignorowana. Chciałbym, żeby kciuk był cieńszy niż tor, jak wyżej.

Wygląda na to, że mogę sfałszować szerokość, ustawiając obramowanie na -webkit-scrollbar-thumb z 3px o tym samym kolorze co ścieżka, ale działa to tylko z nieprzezroczystym kolorem tła i potrzebuję go do pracy z przezroczystym kolorem dla tor jak wyżej.

Przykład jsfiddle: http://jsfiddle.net/L6Uzu/1/

Answer 1

Masz rację, że WebKit ignoruje deklarację na szerokość paska przewijania kciuka. Ignoruje to również na torze.

Problem z używaniem border polega na tym, że rysuje on krawędź wewnątrz kciuka, więc jeśli po prostu wykonasz kolor transparent, nie zadziała.

Rozwiązaniem jest zmiana miejsca dołączenia tła. Domyślnie tło rozciąga się pod granicą, jak wspomniano. Możesz użyć właściwości background-clip, aby to zmienić, tak aby obejmowała jedynie krawędź pola dopełniającego. Wtedy po prostu trzeba zrobić 3PX przezroczystą ramkę, a następnie Boba swój WUJEK

::-webkit-scrollbar-thumb { 
    background-color: #818B99; 
    border: 3px solid transparent; 
    border-radius: 9px; 
    background-clip: content-box; 
} 

Zobacz http://jsfiddle.net/L6Uzu/3/

to działa poprawnie w Chrome, ale Safari nie ma tak zaawansowane implementację border-radius, więc zaokrąglone rogi nie są widoczne.