Kategorien
JavaScript & jQuery Programmierung

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

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)

Kategorien
Design HTML/CSS

CSS: Scrollleisten in Chrome individuell gestalten

Vom Internet Explorer kannte man die Möglichkeit bereits, die Scrollleisten des Browsers individuell anzupassen. Bereits seit der uralten Version 5.5 ist es möglich, die Farbe der Leiste und ihrer Bestandteile zu ändern. Mittlerweile erlauben Webkit-Browser (beispielsweise Chrome und Safari) ebenfalls, die Leisten zu individualisieren. Allerdings geht Webkit hier noch einen Schritt weiter – nicht nur die Farbe lässt sich ändern.


Beispiele für individuelle Scrollleisten

Farbe, Breite, Rahmen

Verschiedene Pseudoelemente können verwendet werden, um alle Bestandteile der Scrollleiste ganz individuell zu gestalten. Wie bei normalen HTML-Elementen auch besteht die Möglichkeit, die Hintergrund- und Vordergrundfarbe sowie den Rahmen anzupassen. Selbst gepunktete und abgerundete Scrollbar-Tracks sowie Hintergrundgrafiken können erstellt bzw. implementiert werden.

Folgende Pseudoelemente stehen zum Anpassen zur Verfügung:

::-webkit-scrollbar { } /* gesamte Scrolleiste */
::-webkit-scrollbar-button { } /* Pfeil-Buttons */
::-webkit-scrollbar-track { } /* Bereich für den Schieberegler */
::-webkit-scrollbar-thumb { } /* Schieberegler */
::-webkit-scrollbar-corner { } /* Größenregler (bei TEXTAREA sichtbar) */

Wie gewöhnliche HTML-Elemente kann man die einzelnen Pseudoelemente nun gestalten:

::-webkit-scrollbar {
  width: 20px;
  background: yellow;
}
::-webkit-scrollbar-thumb {
  border: 2px dotted green;
  border-radius: 10px;
}

Das Beispiel färbt den gesamten Bereich für die Scrollbar gelb ein und setzt ihn auf eine Breite von 20 Pixel. Der Schieberegler wird mit einer grünen gepunkteten Linie versehen und erhält abgerundete Ecken. Zusätzlich kann man mit entsprechenden Pseudoklassen das Aussehen bei Interaktion mit der Maus verändern:

::-webkit-scrollbar-thumb:hover {
  background: red;
}
::-webkit-scrollbar-thumb:active {
  background: blue;
}

Nur eine Sache beherrschen die Pseudoelemente nicht: Es lassen sich keine CSS3-Transitions anwenden. Weiche Übergänge zwischen den Zuständen („hover“ und „active“) sind – zumindest derzeit – nicht möglich. Ansonsten sind der Kreativität keine Grenzen gesetzt. Von dezent bis schillernd bunt ist alles machbar.

Zusätzliche Pseudoklassen

Wer möchte, kann mit zusätzlichen Pseudoklassen das Aussehen weiter individualisieren. So gibt es die Klasse „:inactive-window“, mit der das Aussehen jedes Pseudoelementes für ein inaktives Fenster angepasst werden kann. Die beiden Klassen „:horizontal“ und „:vertical“ erlauben die unterschiedliche Gestaltung horizontaler und vertikaler Leisten:

::-webkit-scrollbar-thumb:horizontal {
  height: 12px;
}

Fazit: Gerade für mehrzeilige Formularfelder ist es schön, wenn diese gestalterisch ans Seitenlayout angepasst werden können. Hier bieten die Webkit-Browser mit den Pseudoelementen interessante Möglichkeiten.

(dpe)