Denis Potschien 15. März 2013

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

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

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:

<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:

$(".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:

$(".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

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

12 Kommentare

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

  2. 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.

    • 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

    • 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

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

  4. 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/

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

  6. 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…

  7. 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!

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück