Wie ist die Situation im Jahr 2017 für eine so denkbar einfache Sache? Erstaunlicherweise sehr schlecht. Sogar Google hat bei Gmail eine gestylte Scrollbar. Jedoch nur in Webkit-Browsern wie Chrome, Safari und Opera, nicht bei Firefox, Edge sowie den meisten mobilen Browsern.
caniuse.com stellt die Unterstützung vom sogenannten CSS Custom Scrollbar Specification so dar:
Für Cracks als CSS3-Tag würde das so aussehen:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
Zum Glück gibt es diverse Javascript-Plugins, die einem helfen, die Webkit-Beschränkungen zu umgehen. Die meisten sind leider nicht sehr zuverlässig.
Für das ARCHIV-KALK-Projektatelier habe ich eine Webseite geschrieben, welche dieses Plugin verwendet. Die Scrollbar spielt im Design eine zentrale Rolle. Das minimalistische Layout und die klaren, punktuierten Akzente, durch die optisch an Windows 2.0 angelehnten Objekte, sollen eine Grundlage für ein solides User Experience bilden.
Die Webseite sieht so aus:
www.ARCHIV-KALK.ch
(le)