201417Nov

CustomScrollbar: Eigene Scrollbars auf Websites nutzen

Das Thema ist zwar nicht gänzlich neu, aber aus gegebenem Anlass war es an der Zeit, eine eigene Entwicklung anzufertigen: Die Rede ist von individuellen Scrollbars auf Websites, die per CSS angepasst werden können. Bis heute gibt es keine native Möglichkeit, das Aussehen der Scrollbalken in Webbrowsern anzupassen. Zum einen sind die Scroll-Elemente in Browsern unterschiedlich implementiert (Chrome etwa kommt mit einer eigenen Lösung) und zum Anderen sind die Bedienelemente vom Betriebssystem abhängig. Natürlich gibt es bereits etliche JavaScript- oder jQuery-Lösungen für eigene Scrollbars, doch diese fallen sehr unterschiedlich aus. Ich habe daher ein kleines Skript entwickelt, das auf das eigentliche Verhalten der Browser-Scollbars zurückgreift und keine zusätzlichen Berechnungen benötigt.

CustomScrollbar - Eigene Scrollbars auf Websites nutzen

Dementsprechend bleibt das jeweilige Verhalten des Browser-Scrollings, was das Beschleunigen und Abbremsen des Scrollbalkens beinhaltet. Es wird also lediglich das native Scollbar-Element ausgeblendet und ein eigener div-Container wird darüber gelegt. Enstanden ist daraus schließlich CustomScrollbar, eine kompakte JavaScript-Lösung für die genannte Problematik.

Das Skript benötigt keine externen Bibliotheken und ist in erster Linie auf responsive Websites ausgelegt. Daher wird nur eine vertikale Scrollbar unterstützt, da horizontale Scrollbalken dank Media Queries der Vergangenheit angehören sollten. CustomScrollbar ist sehr minimalistisch und benötigt im Endeffekt nur eine Einstellung, mit der sich die Höhe des Scrollbalkens (thumb) prozentual festlegen lässt. Der Prozentwert bezieht sich dabei auf die Höhe des Browserfensters:

  • var scrollbar = CustomScrollbar({
  • thumbHeight: 40
  • });

In dem Beispiel beträgt die Höhe des Scrollbalkens also 40% der Fensterhöhe. Weitere optionale Parameter wären bodyPaddingRight und selectors, mit denen sich ein Abstand rechts festlegen oder die Standard-Selektoren der Container anpassen lassen. Auf GitHub findet sich die dazugehörige CSS-Konfiguration, wobei es sich um absolut positionierte div-Container handelt. Die Grafiken der Pfeile wurden im Beispiel mit transparenten PNG-Grafiken umgesetzt, wobei hier natürlich auch SVG oder eine eigene Icon-Schriftart zum Einsatz kommen kann.
CustomScrollbar enthält eine kleine Geräte-Erkennung und wird auf mobilen Endgeräten ausgeblendet, da hier in der Regel das native Scroll-Verhalten des Smartphones bzw. Tablets gewünscht ist. Das Skript wurde auf moderne Webbrowser und Betriebssysteme ausgelegt und entsprechend getestet. Zu den Test-Umgebungen zählen Windows, Mac OS X, iOS und Android sowie mobile Android-Geräte, iPhone/iPad und das Microsoft Surface. CustomScrollbar steht als Open Source-Projekt unter der MIT-Lizenz zur Verfügung und kann nach Belieben erweitert werden.