201021Nov

fleXcroll: Anpassbare JavaScript-Scrollbars

Für Websites mit außergewöhnlichem Design oder besonderen Bereichen können angepasste Scrollbars gewünscht sein. Die Bedienelemente sind dank JavaScript nicht nur Flash-Websites vorenthalten und mittlerweile gibt es auch sehr moderne Standalone-Lösungen, die sehr gut funktionieren und zudem angepasst werden können. Ein empfehlenswertes Skript dieser Art, welches kein Framework benötigt, nennt sich fleXcroll und kann bereits auf der Website getestet werden. Es unterstützt neben den eigentlichen Scrollbars auch das Scrollen mit Mausrad oder Tastatur und funktioniert auch in älteren Versionen des Microsoft-Browsers.

fleXcroll - Cross Browser Custom ScrollBar script

Der Einsatz von fleXcroll ist denkbar einfach, wie ein kleines Beispiel demonstriert:

  • HTML:
  • <div id="mycustomscroll" class="flexcroll">
  • Inhalt
  • </div>
  •  
  • JavaScript:
  • fleXenv.fleXcrollMain("mycustomscroll");

Anzumerken sei an dieser Stelle noch, dass der Scroll-Container die CSS-Eigenschaft "overflow:auto;" besitzen muss. Sollte bei einem Benutzer also JavaScript deaktiviert sein, können die entsprechenden Bereiche trotzdem gescrollt werden.
Das Skript ist in komprimierter Form etwa 17,5 KB groß und kann für private Projekte eingesetzt werden. Für eine kommerzielle Nutzung wird eine kleine Gebühr von 30 USD erhoben.