Suche

Scrollbar Styling mit Nicescroll 3

jQuery Plugin

12 Mrz 2014

Erfahrungen beim stylen von Scrollbars

Unsere Kunden wünschen sich individuelle Webdesigns. Dabei werden oft die Fragen gestellt ob es auch möglich ist
Checkboxes, Radio Buttons und Scrollbars nach individuellen Wünschen zu stylen. Diese Frage kann zwar
grundsätzlich mit ja beantwortet werden, jedoch stellt diese Art der Frontend-Entwicklung einen Mehraufwand dar um
diese Elemente in allen Browsern gleich und vor allem mit der gewohnten Usability darzustellen.

Für Scrollbars könnte sich dieses Problem mit dem Plugin Nicescroll von InuYaksa nun zu großen Teilen gelöst haben. Nach längerer
Recherche und dem Testen diverser Plugins bin ich nun auf dieses jQuery Plugin gestoßen und muss sagen, dass die ersten Tests sehr
vielversprechend aussehen. Dieses Scrollbar-Plugin funktioniert für Scrollbars beim Body, Divs, iFrames und auch Textfeldern.

Das Plugin bietet u.a. die Möglichkeit CSS-Eigenschaften wie background-color, opacity (Max- und Min-Wert), border-radius (muss vom Browser unterstützt werden), Breite und Höhe des Scroll-Balkens anzupassen. Zusätzlich kann das Verhalten mit diversen Parametern (z.B. scrollspeed, mousescrollstep, smoothscroll) geregelt werden.
Seit Kurzem bietet der Entwickler auch ein WordPress Plugin seines Tools an. Die Einstellungsmöglichkeiten des WordPress Plugins sind aber noch sehr gering, daher sollte ggf. auf das Haupt-Plugin zurückgegriffen werden.

Der Entwickler gibt für sein Projekt die Kompatibilität für alle derzeit gängigen Browser im Desktop- und Mobilbereich an.
Dazu werden nach Aussage des Entwicklers, auch ältere Browserversionen unterstützt.

Liste der Mobil-Geräte:
Iphone (iOS 4,5 und 6)
IPad (iOS 4,5 und 6)
IPad Mini (iOS 6+)
iPod Touch (iOS 4+)
Android Phones (version 2.3+, 4+)
Android Tablets Android Phones (version 2.3+, 4+)
Windows phones (WP 8 und WP 7.5 (Mango))
Microsoft Surface (IE 10 (touch))
Playbook (Playbook OS 2.0+)

Scrollbar Styling

Scrollbar Styling

Liste der Desktop Browser
IE6, IE7, IE8, IE9, IE10, Chrome 2+, Firefox 3+, Opera 9.5+, Safari 4+

Liste der mobilen Browser
Android 4+, Android 2+, Safari 4+, Windows Phone 8, Windows Phone 7, BlackBerry, Chrome iOS, Opera Mini

Bisher konnte ich erst die Hauptbrowser (Firefox, Chrome, Internet Explorer und Safari) in den aktuellsten Versionen sowie
das iPad Air (Safari) und Android 4.1.2 (Android 4+) testen können. Dort hat sich die individuelle Scroll Bar sehr gut verhalten.

Selbst in den älteren IE-Versionen (IE7, IE8, IE9) funktioniert die jQuery Scrollbar gut.

 

 

 

 

Fazit:
Wie schon zuvor beschrieben, verhält sich dieses Plugin mit aktuellen und sogar älteren Browsern sehr gut und verleiht der Website eine noch individuellere Darstellung.
Das Plugin wird vom Entwickler seit November 2011 entwickelt und wird stetig weiterentwickelt. Zudem ist es kostenlos und wird als Open Source Version zum Download angeboten.
Wir werden dieses Tool in geraumer Zeit sicher in einem Live-Projekt zum Einsatz bringen und die Lauffähigkeit weiter testen. Darüber werden wir über weitere Erkenntnisse berichten.

Autor

neosmart GmbH

Das Team von neosmart berichtet im Blog über aktuelle Projekte und Neuigkeiten aus den Bereichen Webdesign, Webentwicklung und Social Media.