Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 15. März 2013

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

Scrollbare Elemente inner­halb einer Website sind kei­ne Besonderheit. Leider sehen in den wenigs­ten Fällen weder schön aus, noch pas­sen sie ins Layout. Denn immer, wenn es etwas zu scrol­len gibt, wer­den stan­dard­mä­ßig die Scrollbars des Browsers ver­wen­det. Das jQuery-Plugin Custom Content Scroller stellt indi­vi­du­el­le Scrollleisten zur Verfügung, die ein­fach ein­ge­setzt wer­den kön­nen.

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 ein­ge­bun­den wer­den. Das Standardlayout lie­fert ein dezen­tes Grund-Design, wel­ches in einer Vielzahl bestehen­der Projekte wohl ohne gro­ße Anpassungen ein­ge­setzt wer­den kann.

Sind bei­de Dateien ein­ge­bun­den, las­sen sich per JavaScript die Scrollleisten belie­bi­gen Container-Elementen zuwei­sen. Voraussetzung ist natür­lich, dass der Inhalt des Containers grö­ßer ist als der Container selbst. Das Plugin sorgt anschlie­ßend dafür, dass die Inhalte inner­halb des Containers gescrollt wer­den kön­nen:

<script>
  (function($){
    $(document).ready(function(){
      $(".inhalt").mCustomScrollbar();
    });
  })(jQuery);
</script>

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

So gibt es bei­spiels­wei­se die Möglichkeit, neben Scrollbars auch Scrollbuttons ein­zu­blen­den, die das Feature mit­brin­gen, eine bestimm­te Anzahl von Pixeln nach oben oder unten scrol­len zu kön­nen:

$(".inhalt").mCustomScrollbar(
  scrollButtons: {
    enable: true,
    scrollAmount: 10
  }
);

In den meis­ten Fällen ist man mit dem hori­zon­ta­len Scrollen gut bedient. Vertikales Scrollen kann eben­so rea­li­siert wer­den:

$(".inhalt").mCustomScrollbar(
  horizontalScroll: true
);

Das Plugin stellt vie­le wei­te­re Optionen zur Verfügung. Auch das Scrollen per Mausrad ist grund­sätz­lich vor­ge­se­hen. Dazu ist aller­dings zusätz­lich das Mousewheel-Plugin für jQuery not­wen­dig.

Scrollbar individuell gestalten

Wer mit dem Standardlayout der Scrollbars nicht zufrie­den ist oder sie für ein Weblayout anpas­sen möch­te, kann das Aussehen per CSS ändern.

Das Stylesheet ist mit über 400 Zeilen zwar nicht gera­de über­sicht­lich. Allerdings beinhal­tet die Dokumentation des Plugins eine sehr schö­ne Grafik, aus der ersicht­lich wird, wel­che ein­zel­nen Elemente die Scrollbar hat und unter wel­chen Klassenbezeichnungen man sie in der CSS-Datei fin­det.

Fazit: Das Plugin Custom Content Scroller ist ein­fach ein­zu­set­zen und fast nach Belieben indi­vi­du­ell anpass­bar. Wer mit scrol­len­den Bereichen auf der Website arbei­ten muss oder will, soll­te dem Plugin eine Chance geben.

Links zum Beitrag

(dpe)

Denis Potschien

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.

10 Kommentare

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

  2. Ich bin da ganz ande­rer Meinung: war­um müs­sen jetzt eigent­lich immer die­se däm­li­chen JS-Scrollbars benutzt wer­den?! Es bläht (mit den vie­len ande­ren Spielereien) den Code auf, ist zumeist unge­wohnt zu bedie­nen und nutzt letzt­lich nur der Optik. Nebenbei “rut­sche” ich als Nutzer viel­fach von der Scrollbar ab und fin­de mich in Folge des­sen im dahin­ter lie­gen­den Fenster wie­der. Ganz abge­se­hen davon, dass es die Seite sub­jek­tiv ver­lang­samt.

    Was ist mit dem KISS Prinzip? Warum es nicht bei der Scrollbar belas­sen wel­che man Systemweit gewohnt ist?

    Mein Verständnis von “Kommunikation“sdesign” ist, sich auf all­seits bekann­te Standards zu eini­gen.
    Wir haben im Straßenverkehr ja auch nicht 10 ver­schie­de­ne Versionen eines Stop-Schilds, Lichtschalter sind in der Regel an Stellen wo man sie ver­mu­tet und ein Schaltknopf an einer Waschmaschine ist ein Schaltknopf. Basta.
    Das hat Gründe der Informationsvermittlung.

    “Designte” Scrollbars sind oft­mals nicht als sol­che zu erken­nen, schwe­rer zu bedie­nen als die sys­tem­wei­te Variante und dazu schwe­rer zugäng­lich.
    Dies ist – in mei­nen Augen – genau ein Beispiel was Kommunikationsdesign *nicht* sein soll­te.

    • dei­ne argu­men­te sind durch­aus ver­ständ­lich aber:
      die stan­dart scroll­bars haben haben immer eine fes­te brei­te was gera­de wenn man ver­sucht platz­spa­rent zu arbei­ten iwe zm bei­spiel in UIs sind die­se doch meis­tens zubreit. was die erkenn­bar­keit angeht liegt das eher am desing des plub­lisher (oder wie man die leu­te auch nen­nen mag) der web­site wo die­se scroll­bars ein­ge­baut sind als am plugin selbst und was die benutz­freund­lich­kiet angeht kann man die­se ja mit and­ren jque­ry addons iw z.b. mou­se­wheel auch opti­mie­ren, das “auf­blä­hen” des source fällt dem user sowie­so nicht auf und die ver­lang­sa­mung ist wie du rich­tig sag­test sub­jek­ti­ves emp­fin­den den die – wenns hoch­kommt – sekun­den merkt man nur wenn man dar­auf ach­tet. natür­lich hast du recht das “umbas­teln” der scroll­bar nach­tei­lig sein kann aber liegt wie gsat darn wie es kon­fi­gu­riert ist und ob man es übrtreibt oder nicht

      gruß jungluth

    • Deine Argumetation ist schon nach­voll­zieh­bar, aber das Design der Standart-Scrollbars sind a) in den unter­schied­li­chen Browsern und B) nach Betriebsystem auch unter­schied­lich.
      Ich den­ke ein­mal du möch­test nicht das glei­che ein­heit­li­che Auto mit der Farbe wie alle ande­ren auch fah­ren.
      greetz Joe

  3. Echt schi­ckes Plugin. Schön das sich Scrolleisten damit auch inner­halb klei­ne­rer Divs opisch anspre­chend plat­zie­ren las­sen.

  4. Solche Scrollleisten sehen schon schi­cker aus …

    Früher konn­te man ja auch im Internet Explorer die Scollleisten ohne JavaScript anpas­sen. Und Chrome bie­tet die Funktion ja auch von Haus aus – ihr hat­tet 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 rich­ti­gen Zeit. Werde es in einem neu­en Projekt aus­tes­ten.

  6. Gefällt mir… :-)
    Ich hat­te übri­gens kei­ne Probleme mit mei­nem Mouse-wheel… ^^
    Ausserdem lässt sich das – und auch die Scroll-Geschwindigkeit – per Konfiguration steu­ern…

  7. Diese Standard-Scrollbars sind wirk­lich kein Augenschmaus…
    Da hilft natür­lich nur Javascript und CSS gegen…

    Dennoch fin­de ich bei sol­chen Plugin die Veränderung der “Scrollgeschwindigkeit” ein biss­chen ner­vig!
    Zudem ist hier die Funktion des scrol­lens mit Hilfe der Radtaste der Maus nicht ver­füg­bar (was ich doch sehr scha­de fin­de, da ich per­sön­lich die­se Funktion öfters benut­ze um gro­ße Abschnitte zu über­sprin­gen).
    Es ist die Frage, ob man die­se Gewohnheiten beein­flus­sen / ver­än­dern soll­te..
    Um die­se nicht zu ver­än­dern habe ich vor eini­ger Zeit die­se jQuery Plugin gefun­den: http://jamesflorentino.github.com/nanoScrollerJS/
    Dieses Unterstützt all die­se Sachen ein­zi­ges Manko: Ohne JS läuft nichts..
    Da muss man noch was gegen machen! Ansonsten gefällt mir die­se Plugin mehr!

Schreibe einen Kommentar zu Fumar Porros Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.