Frisch notiert!

Die neusten Artikel aus unserem Blog.

CSS „overflow: auto“ – Scrollleisten nicht sichtbar in Webkit (Safari, Chrome,…): Was tun?

Zuletzt aktualisiert am 18/08/2016 von Gino Cremer
6 Kommentare
Webdesign
/ Webdesign / 6

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“.

Gino Cremer

Ich bin Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen. Ich habe langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis und bin ein Webdesigner der ersten Stunde. Daneben arbeite ich auch als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.

Weitere Beiträge von gino anzeigen

6 Kommentare

  1. Hallo Gino,

    danke Dir für den Tipp. Ich habe allerdings ein Problem an dem ich fast verzweifel.

    Im Safari wird mir ein Scrollbalken angezeigt aber nur wenn ich auch scrolle. Das heist der Benutzer erkennt vorher vielleicht nicht auf den ersten Blick, dass es sich um einen scrollbaren Bereich handelt. Und zweitens: Auf dem Iphone habe ich gar keinen Scrollbalken. Gilt das nicht auch für den mobilen Safari Browser?

    Über eine Antwort freue ich mich

    lg
    André

    1. Hallo André. Kannst du uns vielleicht die Seite (URL) nennen wo das Problem auftritt? Ich denke, dann sieht man genauer was nicht stimmt. Die Gründe können ja sehr vielfältig sein. Hast du generell deine Seite mal durch den W3C Validator prüfen lassen auf CSS „Ungereimtheiten“? Und konntest du z.B. über die Firefox-Erweiterung „Firebug“ irgendwelche Javascript-Fehler entdecken?
      Ich weiss auch nicht wie tief du in die Materie einsteigen konntest. Wenn du schonmal einen Link schicken könntest, kann man ja mal weitersehen.

      Viele Grüße,

      Gino

  2. Inzwischen – 2016 – hat wohl auch der Firefox die Untugend der unsichtbaren Scrollbar angenommen.
    Leider gibt es für den Firefox keine Möglichkeit, die Scrollbars per CSS zu stylen. Ein böser Usability-Fail

  3. Ich denke mal im Großteil der Fälle ist die Problematik eher die dass man die Scrollbars eben nur sehen möchte wenn man darüber fährt.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert