Categories
Virtual Log

CSS-Trick: Scrollbar im Internet Explorer automatisch ausblenden

Die graue Scrollbar passt partout nicht zum Design der Website oder stört einfach das Gesamtbild. Dafür gibt es jetzt auch im Desktop-IE eine elegante Möglichkeit, die Scrollbar automatisch auszublenden aber trotzdem noch scrollen zu können.

Eine gefühlte Web-Ewigkeit ist es her, dass man im Internet Explorer die Farbe der Scrollbar per CSS bis ins letzte Pixel anpassen konnte. Vielleicht erinnert sich noch jemand an die unzähligen scrollbar-*-color Eigenschaften.

Neu ab dem IE10 und noch relativ unbekannt ist hingegen die Möglichkeit, per CSS die Scrollbar im Desktop-IE auszublenden aber trotzdem noch scrollen zu können. Der IE bietet dafür zwei Möglichkeiten an, die man im Moment mit dem ms-spezifischen CSS-Property -ms-overflow-style definiert.

body { -ms-overflow-style: none; }

Die erste Möglichkeit ist, die Scrollbar komplett auszublenden, aber trotzdem noch scrollen zu können (vorausgesetzt das Element wurde nicht auf overflow:hidden gesetzt, klarerweise).

body { -ms-overflow-style: -ms-autohiding-scrollbar; }

Die zweite und interessantere Möglichkeit ist, die neue halbtransparente Auto-Hiding-Scrollbar im IE zu aktivieren. Diese Scrollbar ist normalerweise unsichtbar und blendet sich nur dann ein, wenn man mit der Maus über den Bildschirm fährt. Scrollt man mittels Touch, Mausrad oder Tastatur wird lediglich die Positition im aktuellen Element mit einer dezenten Linie dargestellt. Auch diese Anzeige blendet sich nach einer gewissen Zeit wieder aus. Da die Scrollbar über den Content eingeblendet wird, sollte man keine wichtigen Elemente am rechten bzw. unteren Bildschirmrand darstellen.

Die Auto-Hiding-Scrollbar ist übrigens diegleiche, die der IE in der Modern UI-Version standardmäßig verwendet.

Im Desktop-IE bekommt man die neue Auto-Hiding-Scrollbar übrigens auch dann, wenn man einen -ms-viewport definiert.

Wann soll ich -ms-overflow-style verwenden?

Grundsätzlich würde ich ein Vendor-spezifisches Property nur dann verwenden, wenn es designmäßig absolut notwendig ist und generell das Browser-UI dem Browser bzw. User überlassen. In manchen Fällen kann es aber durchaus Sinn machen und gerade die neue Auto-Hiding-Scrollbar ist ja ohnehin bereits in der Modern-UI Standard.

In Chrome und Firefox gibt es übrigens ähnliche CSS-Properties (::-webkit-scrollbar { display:none; } und overflow: -moz-scrollbars-none), um Scrollbars auszublenden und das overflow-style Property könnte in Zukunft vielleicht standardisiert werden.

Wie gefällt dir die neue Auto-Hiding-Scrollbar, die ja bei Tablets und Smartphones Standard ist? Hast du die -ms-autohiding-scrollbar bereits auf einer Seite gesehen bzw. selbst verwendet? Sollte der Desktop-IE standardmäßig die Modern UI-Scrollbar verwenden?

Weitere Ressourcen

12.02.2014 Virtual Net

Kommentieren

Name
E-Mail (wird nicht veröffentlicht)
Homepage (optional)