malihu-custom-scrollbar-plugin

Vielfältig individualisierbares Custom-Scrollbar-jQuery-Plugin mit vielen Features

Jeder kennt sie und aus den meisten modernen Webdesigns ist sie nicht mehr wegzudenken: die Bildlaufleiste, auch bekannt als Scroll-Bar. Mithilfe der entsprechenden Klasse lässt sie sich auf vielerlei nützliche Arten definieren, was eigentlich auch keine große Herausforderung sein sollte –immerhin gibt es zahlreiche jQuery-Plugins, mit denen sich ansprechende Scroll-Bar-UIs erstellen lassen. Problematisch wird es aber, wenn „scroll on div“ festgelegt werden soll.

Darin sind nämlich meist viele dynamische Daten enthalten, bei denen man mit der Nutzung von jQuery-Scroll-Plugins in den meisten Fällen in einer Sackgasse landet. So bedeuten dynamische Daten vor allem, dass Content-divs mithilfe von AJAX-Daten gefüllt oder bei einem Request teilweise geändert werden. Solange die Daten statisch sind, klappt die Implementierung von Cross-Browser-Scroll-Plugins problemlos, sobald die Daten dynamisch sind, muss eine andere Lösung her.

Feature des malihu-custom-scrollbar-Plugin

Abhilfe schafft dabei zum Beispiel das Scrollbar-jQuery-Plugin malihu-custom-scrollbar, das nicht nur vielfältig individualisierbar ist, sondern etwa auch vertikales und horizontales Scrollen, Scrolling Momentum sowie Keyboard- und Touch-Support zu seinen Features zählt. Die Installation des Plugins erfolgt einfach über Bower oder npm; zur Nutzung wird mindestens jQuery 1.6.0 oder höher benötigt.

Der Browser-Support des Plugins ist sehr gut; unterstützt werden alle modernen Browser sowie Internet Explorer ab Version 8. Auch die Browser auf den großen Mobile-Betriebssystemen iOS, Android und Windows Phone werden unterstützt. Mehr Informationen zu dem Plugin finden sich beispielsweise auf GitHub; eine ausführliche Dokumentation steht auf der Projekt-Website zur Verfügung.

Übrigens lässt sich das Custom-Content-Scroller-Plugin auch mit einer Angular-Direktive nutzen, um eine Scroll-Bar-Direktive zu erstellen und sie auf einen Ziel-Container anzuwenden. Wie man dazu vorgehen sollte, erklärt zum Beispiel ein kurzes Tutorial zum Thema.