JQuery Plugin-Tipp: slimScroll

Den meisten von euch wird sicherlich die kleine Box oben rechts auf Facebook aufgefallen sein, welche stets die neuesten Aktivitäten anzeigt. Das besondere daran ist jedoch nicht nur, dass diese scheinbar beliebig lang wird, sondern dass diese auch eine sehr feinen Scrollbar mitbringt, die deutlich besser aussieht als die Scrollbar des Systems und vor allem deutlich weniger Platz wegnimmt.
Auf der Suche nach einer entsprechenden Umsetzung dieses Effekts mit JQuery bin ich auf das Plugin slimScroll auf rocha.la gestoßen. Dieses bringt genau die gewünschte Funktionalität.

Hier möchte ich euch kurz beschreiben, wie ihr dieses auf eure Webseite einbinden könnt:

1. Plugin herunterladen

Zunächst müsst ihr das Plugin herunterladen und in ein Verzeichnis eurer Wahl packen.
Download von slimScroll

2. JQuery und Plugin einbinden

An beliebiger Stelle (am besten jedoch im Header- oder Footerbereich) bindet ihr zunächst folgendes ein:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.euredomain.de/verzeichniseurerwahl/slimScroll.js">
</script>
<script type="text/javascript" src="http://www.euredomain.de/verzeichniseurerwahl/main.js"></script>

In den ersten beiden Zeilen wird JQuery und JQuery UI direkt von jquery.com eingebunden. Natürlich könnt ihr die beiden JS-Dateien auch auf eurem eigenen Host hinterlegen und die Pfade entsprechend ändern.
In der dritten Zeile wird schließlich das Plugin eingebunden, welches ihr auf eurer Webpräsenz in einem Verzeichnis eurer Wahl hinterlegt habt.

3. Plugin anwenden

Nun wollen wir das Plugin auf ein beliebiges Element auf eurer Webseite anwenden und diesem die Scroll-Funktionalität zufügen.

Nehmen wir an, es handelt sich um folgendes DIV-Tag mit der Klasse scrollable:

<div class='scrollable'>
  Hier Inhalt der Box einfügen.
</div>

Diese sprechen wir nun mittels JQuery an (wer mit JQuery noch nicht so vertraut ist, findet auf jquery.com einige schöne Einführungen). Folgenden Code fügen wir nun in die main.js ein:

$(document).ready(function(){
 
	$(".scrollable").slimScroll({
		height: '150px'
	});
 
});

Die Klasse scrollable wird hier also mit der slimScroll-Funktion versehen. Hier wird genau ein Parameter verwendet, nämlich die Höhe der Box auf 150px festgesetzt. An dieser Stelle können selbstverständlich Werte eurer Wahl stehen.

Ferner gibt es folgende weiteren Einstellmöglichkeiten:

  • width: Breite der Box. Falls nicht gesetzt, wird dies auf den Wert des Elternelements gesetzt.
  • size: Größe der Scrollbar.
  • position: left/right.
  • color: Farbe der Scrollbar

Anwendungsbeispiele für verschiedene Einstellungen gibt es auf der Seite des Pluginentwicklers.



Hat dir dieser Artikel gefallen? Abonniere doch unseren RSS-Feed und bleibe über alle weiteren Updates auf dem Laufenden!



Hinterlasse eine Antwort