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

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

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

Es sieht so aus, als ob ich die Breite fälschen kann, indem ich einen Rand auf das Bild setze-webkit-scrollbar-thumb 3px mit der gleichen Farbe wie die Spur, dies funktioniert jedoch nur mit einer undurchsichtigen Hintergrundfarbe, und ich brauche es, um mit einer transparenten Farbe für die Spur wie oben zu arbeiten.

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