Möchte man in seinem Layout gezielt DIV-Elemente mit einer fixen Höhe und vertikalen Scrollbalken ausstatten (z.B. um in einer kompakten Box nicht nur die letzten 5 Blog-Kommentare sondern deren 20 anzuzeigen), stößt man unweigerlich auf ein Problem: Die Scrollbalken in Webkit-Browsern wie Safari und Chrome werden erst sichtbar, wenn man den entsprechenden DIV „hovert“. Per se ist der Scrollbalken nicht sichtbar, was der Usability nicht zuträglich ist. In allen anderen Browsern ist der Scrollbalken immer sichtbar, sobald die Inhalte die Höhe der Box „überlappen“. Was tun?

Scrollbars in Webkit-Browsern unsichtbar – Sinnvoll?

Im Normalfall ist es erwünscht, dass der Besucher / User möglichst auf Anhieb erkennt, dass ihn noch weitere Inhalte per Scrollbalken erwarten. In diesem Sinne sind solche Scrollbars vielleicht nicht hübsch, aber rein von der Usability her sinnvoll.

Bis auf die Webkit-Browser reicht es im Prinzip dem entsprechenden DIV die CSS-Eigenschaft „overflow: auto“ zu geben.

Die Lösung für Webkit-Browser: Proprietäre CSS-Eigenschaften nutzen

Um auch Webkit-Browser das Verhalten der anderen Browser „beizubringen“, müssen wir auf proprietäre Webkit-CSS-Eigenschaften zurückgreifen. Wir bedienen uns der Pesudo-Klassen „-webkit-scrollbar“ um das Verhalten der Scrollbar zu beeinflussen.

.meineklasse::-webkit-scrollbar {
-webkit-appearance: none;
width: 11px;
height: 11px;
}

Durch die CSS-Eigenschaft „-webkit-appearence: none“ schalten wir das „Standard-Verhalten“ ab. Anschließend ist noch die „Formatierung“ der Scrollbalken notwendig, anderenfalls werden die Scrollbalken nicht sichtbar sein (!) :

.meineklasse::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* Angleichen mit Hintergrundfarbe-nicht transparent! */
background-color: rgba(0, 0, 0, .5);
}

Et voila…Nun erscheinen die Scrollbalken immer, auch wenn man nicht aktiv den DIV „hovert“.