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

malihu-custom-scrollbar-plugin
Keine Kommentare

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.

Name malihu-custom-scrollbar
Hersteller Manos
Projektwebsite http://manos.malihu.gr/jquery-custom-content-scroller/
GitHub https://github.com/malihu/malihu-custom-scrollbar-plugin
webinale – the holistic web conference

Webperformance und Page Speed 2021

mit Sven Wolfermann (maddesigns)

UX Design: Kitsch – du willst es doch auch!

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

Software Architecture Summit Online

Aufmacherbild: Set of old paper scroll von Shutterstock / Urheberrecht: Novikov Alex

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -