Die Breite von webkit-scrollbar-thumb kann nicht eingestellt werden

Question

Ich versuche, eine benutzerdefinierte Bildlaufleiste zu erstellen, die in Chrome und Safari funktioniert. Ich habe die folgende CSS versucht:

::-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; 
} 

jedoch die width auf der -webkit-scrollbar-thumb ignoriert wird. Ich möchte, dass der Daumen dünner ist als die Spur, wie oben.

Es scheint, dass ich die Breite fälschen kann, indem Sie einen Rand auf -webkit-scrollbar-thumb von 3px mit der gleichen Farbe wie die Spur, aber dies funktioniert nur mit einer undurchsichtigen Hintergrundfarbe, und ich brauche es mit einer transparenten Farbe für arbeiten die Strecke wie oben.

Beispiel jsfiddle: http://jsfiddle.net/L6Uzu/1/

Answer 1

Sie sind richtig, dass WebKit die Breite Erklärung auf dem Scrollbar-Daumen ignoriert. Es ignoriert es auch auf der Strecke.

Das Problem bei der Verwendung einer border ist, dass es den Rand innerhalb des Daumens zeichnet, also wenn Sie nur die Farbe transparent machen, wird es nicht funktionieren.

Die Lösung besteht darin, zu ändern, wo der Hintergrund angehängt ist. Standardmäßig erstreckt sich der Hintergrund wie bereits erwähnt unter den Rand. Sie können die Eigenschaft background-clip verwenden, um dies zu ändern, sodass sie stattdessen nur bis zum Rand der Füllbox reicht. Dann brauchen Sie nur eine 3px transparent Grenze zu machen, dann Bobs dein Onkel:

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

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

Das funktioniert richtig in Chrome, aber Safari verfügt nicht über eine border-radius Umsetzung fortgeschritten, so die abgerundeten Ecken sind nicht sichtbar.