Browser

jQuery Custom Content Scroller: Schluss mit hässlichen Standard-Scrollbars

15. März 2013
von

Scrollbare Elemente innerhalb einer Website sind keine Besonderheit. Leider sehen in den wenigsten Fällen weder schön aus, noch passen sie ins Layout. Denn immer, wenn es etwas zu scrollen gibt, werden standardmäßig die Scrollbars des Browsers verwendet. Das jQuery-Plugin Custom Content Scroller stellt individuelle Scrollleisten zur Verfügung, die einfach eingesetzt werden können.

jquerycustomcontentscroller
Beispiele für das Plugin im Einsatz

Plugin und Stylesheet einbinden und loslegen

Neben dem jQuery-Plugin muss eine Stylesheet-Datei mit den Standardlayout für die Scrollbars eingebunden werden. Das Standardlayout liefert ein dezentes Grund-Design, welches in einer Vielzahl bestehender Projekte wohl ohne große Anpassungen eingesetzt werden kann.

Sind beide Dateien eingebunden, lassen sich per JavaScript die Scrollleisten beliebigen Container-Elementen zuweisen. Voraussetzung ist natürlich, dass der Inhalt des Containers größer ist als der Container selbst. Das Plugin sorgt anschließend dafür, dass die Inhalte innerhalb des Containers gescrollt werden können:

1
2
3
4
5
6
7
<script>
  (function($){
    $(document).ready(function(){
      $(".inhalt").mCustomScrollbar();
    });
  })(jQuery);
</script>

Im Beispiel wird das Plugin allen HTML-Elementen mit der Klasse inhalt zugewiesen. Weitere Einstellungen sind nicht nötig. Allerdings stellt das Plugin eine Reihe von Optionen zur Verfügung, die etwas mehr Individualität der Optik erlauben.

So gibt es beispielsweise die Möglichkeit, neben Scrollbars auch Scrollbuttons einzublenden, die das Feature mitbringen, eine bestimmte Anzahl von Pixeln nach oben oder unten scrollen zu können:

1
2
3
4
5
6
$(".inhalt").mCustomScrollbar(
  scrollButtons: {
    enable: true,
    scrollAmount: 10
  }
);

In den meisten Fällen ist man mit dem horizontalen Scrollen gut bedient. Vertikales Scrollen kann ebenso realisiert werden:

1
2
3
$(".inhalt").mCustomScrollbar(
  horizontalScroll: true
);

Das Plugin stellt viele weitere Optionen zur Verfügung. Auch das Scrollen per Mausrad ist grundsätzlich vorgesehen. Dazu ist allerdings zusätzlich das Mousewheel-Plugin für jQuery notwendig.

Scrollbar individuell gestalten

Wer mit dem Standardlayout der Scrollbars nicht zufrieden ist oder sie für ein Weblayout anpassen möchte, kann das Aussehen per CSS ändern.

Das Stylesheet ist mit über 400 Zeilen zwar nicht gerade übersichtlich. Allerdings beinhaltet die Dokumentation des Plugins eine sehr schöne Grafik, aus der ersichtlich wird, welche einzelnen Elemente die Scrollbar hat und unter welchen Klassenbezeichnungen man sie in der CSS-Datei findet.

Fazit: Das Plugin Custom Content Scroller ist einfach einzusetzen und fast nach Belieben individuell anpassbar. Wer mit scrollenden Bereichen auf der Website arbeiten muss oder will, sollte dem Plugin eine Chance geben.

Links zum Beitrag

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags: , , ,

12 Kommentare zu „jQuery Custom Content Scroller: Schluss mit hässlichen Standard-Scrollbars
  1. movabo am 15. März 2013 um 15:44

    Diese Standard-Scrollbars sind wirklich kein Augenschmaus…
    Da hilft natürlich nur Javascript und CSS gegen…

    Dennoch finde ich bei solchen Plugin die Veränderung der “Scrollgeschwindigkeit” ein bisschen nervig!
    Zudem ist hier die Funktion des scrollens mit Hilfe der Radtaste der Maus nicht verfügbar (was ich doch sehr schade finde, da ich persönlich diese Funktion öfters benutze um große Abschnitte zu überspringen).
    Es ist die Frage, ob man diese Gewohnheiten beeinflussen / verändern sollte..
    Um diese nicht zu verändern habe ich vor einiger Zeit diese jQuery Plugin gefunden: http://jamesflorentino.github.com/nanoScrollerJS/
    Dieses Unterstützt all diese Sachen einziges Manko: Ohne JS läuft nichts..
    Da muss man noch was gegen machen! Ansonsten gefällt mir diese Plugin mehr!

  2. Fumar Porros am 15. März 2013 um 21:25

    Gefällt mir… :-)
    Ich hatte übrigens keine Probleme mit meinem Mouse-wheel… ^^
    Ausserdem lässt sich das – und auch die Scroll-Geschwindigkeit – per Konfiguration steuern…

  3. Yannick am 16. März 2013 um 10:50

    Vielen Dank für den Hinweis. Kommt für mich genau zur richtigen Zeit. Werde es in einem neuen Projekt austesten.

  4. [...] The article was written by Denis Potschien and first published in our German sister publication Dr. Web Magazin. [...]

  5. [...] The article was written by Denis Potschien and first published in our German sister publication Dr. Web Magazin. [...]

  6. Tobias am 19. März 2013 um 14:12

    Solche Scrollleisten sehen schon schicker aus …

    Früher konnte man ja auch im Internet Explorer die Scollleisten ohne JavaScript anpassen. Und Chrome bietet die Funktion ja auch von Haus aus – ihr hattet da auch mal einen Artikel dazu:
    http://www.drweb.de/magazin/css-scrollleisten-in-chrome-individuell-gestalten-36873/

    • Dieter Petereit am 19. März 2013 um 16:23

      Klar, aber die jQuery-Lösung ist eben einmal hin, alles drin ;-)

  7. Jens am 28. Mai 2013 um 12:46

    Echt schickes Plugin. Schön das sich Scrolleisten damit auch innerhalb kleinerer Divs opisch ansprechend platzieren lassen.

  8. clemisan am 23. Juli 2013 um 16:04

    Ich bin da ganz anderer Meinung: warum müssen jetzt eigentlich immer diese dämlichen JS-Scrollbars benutzt werden?! Es bläht (mit den vielen anderen Spielereien) den Code auf, ist zumeist ungewohnt zu bedienen und nutzt letztlich nur der Optik. Nebenbei “rutsche” ich als Nutzer vielfach von der Scrollbar ab und finde mich in Folge dessen im dahinter liegenden Fenster wieder. Ganz abgesehen davon, dass es die Seite subjektiv verlangsamt.

    Was ist mit dem KISS Prinzip? Warum es nicht bei der Scrollbar belassen welche man Systemweit gewohnt ist?

    Mein Verständnis von “Kommunikation”sdesign” ist, sich auf allseits bekannte Standards zu einigen.
    Wir haben im Straßenverkehr ja auch nicht 10 verschiedene Versionen eines Stop-Schilds, Lichtschalter sind in der Regel an Stellen wo man sie vermutet und ein Schaltknopf an einer Waschmaschine ist ein Schaltknopf. Basta.
    Das hat Gründe der Informationsvermittlung.

    “Designte” Scrollbars sind oftmals nicht als solche zu erkennen, schwerer zu bedienen als die systemweite Variante und dazu schwerer zugänglich.
    Dies ist — in meinen Augen — genau ein Beispiel was Kommunikationsdesign *nicht* sein sollte.

    • Jungbluth am 20. September 2013 um 18:58

      deine argumente sind durchaus verständlich aber:
      die standart scrollbars haben haben immer eine feste breite was gerade wenn man versucht platzsparent zu arbeiten iwe zm beispiel in UIs sind diese doch meistens zubreit. was die erkennbarkeit angeht liegt das eher am desing des plublisher (oder wie man die leute auch nennen mag) der website wo diese scrollbars eingebaut sind als am plugin selbst und was die benutzfreundlichkiet angeht kann man diese ja mit andren jquery addons iw z.b. mousewheel auch optimieren, das “aufblähen” des source fällt dem user sowieso nicht auf und die verlangsamung ist wie du richtig sagtest subjektives empfinden den die – wenns hochkommt – sekunden merkt man nur wenn man darauf achtet. natürlich hast du recht das “umbasteln” der scrollbar nachteilig sein kann aber liegt wie gsat darn wie es konfiguriert ist und ob man es übrtreibt oder nicht

      gruß jungluth

    • Joe am 26. Oktober 2013 um 15:29

      Deine Argumetation ist schon nachvollziehbar, aber das Design der Standart-Scrollbars sind a) in den unterschiedlichen Browsern und B) nach Betriebsystem auch unterschiedlich.
      Ich denke einmal du möchtest nicht das gleiche einheitliche Auto mit der Farbe wie alle anderen auch fahren.
      greetz Joe

  9. Martin am 22. Juli 2014 um 10:45

    Ja, schönes Plugin, doch wenn ich die Verzeichnisstruktur anpasse, dann habe ich nur das Layout aus der style.css, die Scrollbalken tuns nicht.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!