Advitum.de auf Google+

Designen einer Scrollbar – so geht es richtig

Designen einer Scrollbar – so geht es richtig
VN:F [1.9.22_1171]
Bewertung: 3.6/5 (31 Stimmen abgegeben)
Von am
Kategorien: CSS, Design, JavaScript, jQuery, Tutorials

Am Anfang war der Frame. Und mit dem Frame kamen die Scollbars innerhalb der Seite. Und der Programmierer sah, dass es gut war.

Jahrelang war auch alles gut, bis dann schließlich die Designer die unendlichen Weiten des Webs unsicher machten. Alles wollten die Designer verändern, alles sollte schöner werden. Doch an Scrollbars bissen sie sich die Zähne aus. Scollbars ließen sich leider nicht ohne weiteres anpassen.

In diesem Artikel zeige ich, wie man trotzdem, übrigens ganz ohne iFrames, Scollbars erstellen kann, die auch noch toll aussehen.

Designen einer Scrollbar - so geht es richtig, 3.6 out of 5 based on 31 ratings
Bei iFrames findet man häufig Scrollleisten am Rand.
Dieses Beispiel auf http://de.selfhtml.org/html/frames/anzeige/iframe.htm zeigt, wie Scollleisten innerhalb einer Seite, also an einem iFrame, im Firefox standardmäßig aussehen.

Der Schlüssel zur Lösung ist mal wieder jQuery, bzw. eins der vielen Plugins für jQuery.

Schritt 1: Inhalt und ein wenig CSS

In meinem Beispiel liegt der Inhalts-Text, der scrollbar gemacht werden soll. Das Grund-Design habe ich schon fast fertig, nun kommt es zu dem Inhalt selbst, welcher scrollbar sein soll. Als erstes habe ich dem entsprechenden Element mit ein wenig CSS Scrollbars verliehen.

#contentScroller
{
	position: absolute;
	top: 25%;
	bottom: 25%;
	left: 0px;
	right: 0px;
	
	margin: 0px auto;
	width: 50%;
	
	overflow: scroll;
}
Mit reinem CSS sehen die Scrollbars wie immer aus.
Nur mit CSS sehen unsere Scrollbars nicht gerade toll aus.

Die entstehenden Scrollbars sehen genau so aus, wie die Standard-Scrollbars des entsprechenden Browsers. Um diese jetzt zu ersetzen, müssen wir nun erstmal JavaScript einsetzen.

Schritt 2: Einbinden von jQuery jScrollPane

Bevor wir nun mit den Scrollbars anfangen können, müssen wir in unsere HTML-Datei jQuery und das jQuery-Plugin jScrollPane einbinden. Mit letzterem kann man recht einfach beliebige Elemente mit einer Scrollbar versehen.

Nachdem alles eingebunden ist, müssen wir noch die Eigenschaft overflow: scroll; aus unserem CSS-Code entfernen.

Schritt 3: Anwenden des Plugins auf das Element

Jetzt brauchen wir folgenden JavaScript-Code:

$(document).ready(function()
{
	$('#contentScroller').jScrollPane();
});

Die wichtigste Zeile ist hierbei die 3. Zeile, hier wird das Plugin auf den Inhalt angewendet.

Jetzt sind unsere Scrollbars schön
Durch das Plugin haben wir jetzt flexible Scrollbars.

Schritt 4: Anpassen des Aussehens

Da die Scrollbars jetzt mit HTML-Elementen gebildet werden, können wir diese mit CSS ganz nach unseren Wünschen gestalten, wir können die Farben, Transparenzen und Größen nach belieben anpassen, sogar runde Ecken oder Schatten sind möglich.

Für dieses Design waren mir die Scrollbars zu breit, also habe ich sie mit CSS verschmalert. Dazu reicht folgender CSS-Code:

.jspVerticalBar
{
	width: 6px;;
}

.jspHorizontalBar
{
	height: 6px;
}
Unsere Scrollbar passt jetzt zum Design
Jetzt passt die Scrollbar zum Design und kann mit CSS beliebig angepasst werden.

So schnell haben wir dem Element eine individuelle Scollbar gegeben. Wenn wir das jQuery-mousewheel-Plugin inkludieren, kann die Scrollbar sogar mit dem Mausrad gescrollt werden, wie jede andere Scrollbar auch.

Nachteile dieser Technik

Leider sind die tollen Scrollbars nicht ohne Nachteile. Da durch das JavaScript zusätzliche Elemente generiert werden, die jedoch nur dem Design dienen, wird die Semantik der Seite verletzt. Außerdem kommen Browser-Nutzer ohne JavaScript nicht in den Nutzen dieser Technik. Auch kann es passieren, dass der Nutzer die Scrollbar durch das individuelle Design gar nicht als solche erkennt und verzweifelt, da er den Rest des Inhaltes nicht finden kann.

Natürlich sollte man auch nicht zu viele Scrollbars auf einer Seite benutzen, denn dann kommt der Nutzer schnell durcheinander. Auch wenn für uns als Designer vielleicht die Struktur oder die Teilung der Seite klar begründet sein mag, versteht der Nutzer vielleicht nicht sofort, warum es hier zwei Scrollbars gibt.

Fazit

Insgesamt ist diese Technik also mit Vorsicht und nicht im Übermaß zu genießen, denn erst die Dosis macht das Gift!

Es ist nett, wenn man die Scollbar individuell gestalten kann, doch sollte man sich vorher gut überlegen, ob dies auch nötig ist.

Was sagt ihr?

Mich interessiert eure Meinung sehr! Was haltet ihr von individualisierten Scrollbars? Wie findet ihr diesen Artikel? Kommentiert unbedingt weiter unten und nutzt auch das neue Bewertungs-System, um den Artikel zu bewerten. Ich freue mich auf euer Feedback!

Designen einer Scrollbar - so geht es richtig, 3.6 out of 5 based on 31 ratings

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Mathias schrieb am Antworten

Hey,

das hat mir schon mächtig weitergeholfen! Habe das Problem nur noch, dass man in dem Scrollfeld nicht mit dem Mausrad scrollen kann.. Woran liegt das? – Man kann quasi nur den Balken anfassen und ziehen aber nicht mit dem Mausrad scrollen. – Danke schonmal

    Karl schrieb am Antworten

    Stichwort: jquery.mousewheel

G_Note schrieb am Antworten

geht leider nicht:(

    Lars Ebert schrieb am Antworten

    Huhu G_Note, was funktioniert denn nicht? Vielleicht können wir ja an einer Problemlösung arbeiten?

Phil schrieb am Antworten

Super Artikel! Hat mir eine Menge weiter geholfen. Leider ist nur ein Problem da wenn keine Scrollbars benötigt werden. In diesem Falle werden natürlich keine angezeigt, wenn man nun allerdings DIVs hat welche auf Klick wachsen und außerhalb des sichtbaren Bereichs wachsen, erscheinen trotzdem keine Scrollbars.

Gibt es hierfür eine ggf. eine Lösung?

    Lars Ebert schrieb am Antworten

    Mit dem Resize-Event kannst du das prüfen. Einfach per .resize(Funktion() {}); beim Verändern der Größe des Elements die Scrollbars nachliefern, das sollte funktionieren.

      Werner schrieb am Antworten

      Hallo Lars,
      ich erstelle gerade eine Seite bei der ich jQuery-Plugin jScrollPane nutze. Funktioniert auch gut. Aber beim aufziehen oder verkleinern des Browsers bleibt die Scrollbar in der selben Größe in die der Browser sie beim laden berechnet hat.

      Das div ändert sich mit der Größe des Browsers. Ohne ScrollPane verändert sich dann auch die Scrollbar.

      Jetzt habe ich versucht .resize(Funktion() {}); in den code einzubauen. Da ich aber mit Javascript noch Anfänger bin, kriege ich es einfach nicht gebacken. Wahrscheinlich setze ich ’ne Klammer falsch oder ähnliches…

      Wenn Du mir helfen könntest wäre ich sehr dankbar!
      Hier der Code wie ich ihn (ohne .resize(Funktion() {});) zur Zeit nutze:

      $(document).ready(function()
      {
      $(„.scroll“).jScrollPane();
      $(„.jspDrag“).stop().animate({opacity: 0.25});

      $(„.scroll“).on(„mouseenter“, function(){
      $(„.jspDrag“).stop().animate({opacity: 0.65});
      });
      $(„.scroll“).on(„mouseleave“, function(){
      $(„.jspDrag“).stop().animate({opacity: 0.4});
      });
      });

      Danke schon mal im Voraus!
      Gruß,
      Werner

        Werner schrieb am Antworten

        Ich habe die Lösung jetzt gefunden (könnte dem einen oder anderen Anfänger helfen)!
        In der jQuery-Plugin jScrollPane – Datei gibt es am Ende des Dokumentes bzw. Codes die Möglichkeit unter „$.fn.jScrollPane.defaults“ den Wert bei „autoReinitialise“ auf „true“ zu stellen und das zeitliche Intervall mit“autoReinitialiseDelay“ einzustellen.
        Dann passt sich der/die Scrollbalken bei einer Größenveränderung des umschließenden Elementes an.
        Gruß,
        Werner

mkb schrieb am Antworten

Hallo Lars,
ich kämpfe seit einigen Stunden mit dem Jscrollpane und bin nun auch auf Deinen Blog gestoßen: was ich auch verändere, ich bekomme die hübschen lilafarbenen Scrollbalken des Plugins nicht zu Gesicht – das PlugIn verschluckt meine Scrollbalken.
Habe jetzt ein ganz rudimentäres Skript erstellt und komme der Sache noch immer nicht auf den Grund. Wäre für ein kurzes Drübergucken dankbar.
Was läuft da falsch?

scrolli

.scroll-pane { width: 200px; height: 400px; overflow: auto; }

$(document).ready(function()
{
$(‚.scroll-pane‘).jScrollPane();
});

… content here …
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, JA!

    Lars Ebert schrieb am Antworten

    Leider sehe ich von deinem HTML-Markup nichts. Kannst du das vielleicht mir per Mail schicken und ich binde es dann in deinem Kommentar ein?

      mkb schrieb am Antworten

      Sorry, dass man bei meinem letzten Kommentar den Eintrag quasi nicht lesen konnte, da das hmtl-markup geschluckt wurde! ABER: ich habe nach exzessiver Suche die (in meinem Fall) sehr simple Lösung des Problems gefunden! Der zu scrollende Textbereich darf nicht nur in einem Div stehen sondern muss zusätzlich noch von einem p umschlossen sein.
      Also in meinem Fall: div – p – Text ….. – /p – /div
      Jippieh! Danke trotzdem für die Bemühungen.

Daniel schrieb am Antworten

Hey,
nach einigen verzweifelnden Stunden muss ich mich nun doch zu Wort melden. Ich bekomme es leider nicht hin das alles so einzubinden wie es soll. Gibt es die Möglichkeit einer Stepbyestep Anleitung für dieganz dummen? Viele Grüße

Daniel

Martin schrieb am Antworten

Hallo.
Wenn Ich die (iframe)selfhtml-seite öffne, sehe ich ehrlich gesagt nur die platten Scrollbars – also die schönen Riffel mittendrin … nicht.

Nur so als Zwischenfrage – sollte Ich vllt alle optischen Styles in meiner Grundeinstellung des Rechners aktivieren um in den Genuss der Scrollbars zu kommen ?
Bislang bin ich davon ausgegangen daß man mit JS Styles `erzwingen´ kann – egal was im OS eingestellt wurde (sofern JS zugelassen wird auf der Website)

Grüße °o°

Sven K. schrieb am Antworten

Hallo Lars.

Deinen Blog über jScrollPane habe ich mit großem Interesse gelesen. Ich bin derzeit dabei, eine Internetseite zu erstellen, die einen kleinen Textinhaltsbereich in Form eines Iframes enthält. Der Text, der in diesem Iframe erscheint, soll später dynamisch sein (also mittels PHP und MySQL veränderbar sein). Nun versuche ich seit Tagen deinem Blog zu verstehen und die hässlichen Standard Scrollbars dieses IFrames mittels des jScollPane zu verschönern. Ich kann machen was ich will, es funktioniert nicht. Irgendwas mache ich scheinbar falsch. Ich muss allerdings auch gestehen, dass ich vormals noch nie mit jquery gearbeitet habe und daher praktisch keine Erfahrung damit habe, wie man jquery und dann auch so ein jquery plugin wie das jscrollpane einbindet.

Daher hoffe ich auf dich und deine Hilfe. Wäre es möglich, dass ich dir mal meinen Code zukommen lasse, damit du dir das mal anschauen kannst und mir sagen kannst, wo ich die Fehler mache?

Beste Grüße

Sven

    Lars Ebert schrieb am Antworten

    Hallo Sven, was genau passiert denn? Gibt dein Browser dir irgendwelche Fehler in der Konsole aus? Werden überhaupt Scrollbars angezeigt?

Quarz schrieb am Antworten

Hallo Lars,

ich bin auf der Suche nach ’selbstgebauten Scrollbars‘ auf Deine Anweisungen gestoßen.
Sehr schön und auch fast alles verständlich 🙂 – bis auf eine ‚Kleinigkeit‘:
»Schritt 3: Anwenden des Plugins auf das Element.«

$(document).ready(function()
{
$(‚#contentScroller‘).jScrollPane();
});

Wo binde ich diesen JavaScript-Code ein?
Stelle ich dafür eine separate JavaScript-Datei her und verlinke sie mit der html-Datei?

Über Deine Hilfe würde ich mich sehr freuen.

Gruß
Quarz

Werner schrieb am Antworten

Hallo Lars,
ich habe mit jScrollPane eine Seite erstellt.
Unter anderem habe ich auf der Kontaktseite eine textarea bzw. ein Kontakformular eingebunden. Dieses Kontaktformular ist von einem „div“ mit scrollbar umschlossen. Das funktioniert auch so wie es soll. Zumindest auf dem PC, wo ich die Seite getestet habe.
Per Zufall habe ich die Seite auch noch auf dem Laptop (später dann mit jedem, der mir unter die Finger kam) getestet und musste feststellen, dass die Eingabefelder den Text nicht annehmen bzw. nur ganz selten und bestebfalls nur in einem Feld.
Wie kann es sein, das es auf dem PC funktioniert und auf dem Laptop nicht?
Beste Grüße,
Werner

Sky Super schrieb am Antworten

Ich bin generell für individualisierte Scrollbars, da die klassische Scrollbar in vielen Fällen sehr auffällig und hässlich erscheint. Jedoch – wie in diesem Artikel ja so schön geschrieben steht – „erst die Dosis macht das Gift!“.

Diese Artikel könnten dir auch gefallen