JavaScript & jQuery

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

15. März 2013

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

Sortiert nach:   neueste | älteste | beste Bewertung
movabo
Gast
movabo
3 Jahre 1 Monat her
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… Read more »
Fumar Porros
Gast
Fumar Porros
3 Jahre 1 Monat her

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…

Yannick
Gast
Yannick
3 Jahre 1 Monat her

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

trackback

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

trackback

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

Tobias
Gast
3 Jahre 1 Monat her

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
Gast
3 Jahre 1 Monat her

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

Jens
Gast
2 Jahre 11 Monate her

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

clemisan
Gast
clemisan
2 Jahre 9 Monate her
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… Read more »
Jungbluth
Gast
Jungbluth
2 Jahre 7 Monate her
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… Read more »
Joe
Gast
Joe
2 Jahre 6 Monate her

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

Martin
Gast
Martin
1 Jahr 9 Monate her

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

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen