Die Scrollbalken von Browserfenstern werden nicht von der Website selbst oder generell vom Browser gestylt. Sie stammen vom Betriebssystem selbst.
Der Wunsch, das Aussehen dieser Scrollbalken anzupassen, ist stark. Wenn man anfängt, fühlt es sich an, als sollte man das mit CSS machen können. Komplizierter wird es, wenn man nach CSS sucht, um Scrollbalken zu ändern/anzupassen, findet man wahrscheinlich etwas. Das Problem ist, dass es in IE 5.5 proprietäre Browser-Erweiterungen gab, um das Aussehen Ihrer Scrollbalken mit Attributen wie "scrollbar-face-color" zu ändern. IE 5.5 ist lange verschwunden, und das Konzept, eine solche Kontrolle in CSS zu ermöglichen, ist mit ihm verschwunden.
Es gibt jedoch Situationen, in denen Sie sich stark wünschen würden, die Kontrolle über das Aussehen eines Scrollbalkens zu haben. Zum Beispiel, wenn der Scrollbalken nicht für das gesamte Browserfenster ist. Sie haben einen kleinen Bereich auf Ihrer Seite, dessen Höhe Sie kontrollieren müssen, der aber Inhalte enthält, die den Container überlaufen. Sie können den Überlauf dieses Containers auf "auto" setzen und erhalten Ihren Standard-Scrollbalken. Je nach Design der Website kann dieser Scrollbalken seltsam und überhaupt nicht wünschenswert aussehen.
Glücklicherweise können wir die erstaunlichen Fähigkeiten von JavaScript nutzen, um dieses Problem zu lösen und uns wieder vollständige Designkontrolle über unsere Scrollbalken zu verschaffen. Die Grundidee ist, dass wir den scrollbaren Bereich in ein neues Element mit VERBORGENEM Überlauf einpacken, dann entfernen wir den Überlauf vom inneren Element, damit es so hoch sein kann, wie es sein muss. Dann fügen wir einen eigenen Scrollbalken hinzu und beobachten Mausereignisse darauf. Wenn wir ihn nach oben und unten ziehen, passt er den relativen Top-Wert des inneren Containers an und repliziert perfekt das Scrollen.
Um uns die Arbeit zu erleichtern, verwenden wir ein bereits vorhandenes jQuery-Plugin: jScrollPane.
Demo anzeigen Dateien herunterladen
Getestet und es funktioniert in Fx3, Safari 4, IE 6. Opera 9.52 funktionierte, löste aber in einigen Fällen seltsamerweise einen regulären Body-Scrollbalken aus.
Schritt 1: Das Markup
<body>
<div id="page-wrap">
<div class="scroll-pane">
</div>
<img src="images/bottomshadow.png" alt="" class="bottomshadow" />
</div>
</body>Der einzige Grund, warum wir hier ein Pagewrap haben, ist, dass wir unseren kleinen scrollbaren Bereich zentrieren. Da das Plugin das Div mit der Klasse "scroll-pane" in ein weiteres Div einpackt, wird jede Zentrierung, die wir darauf anwenden, es nur innerhalb dieses neuen Wraps zentrieren, nicht am Body selbst. Anstatt uns damit herumzuschlagen, packen wir es also einfach wieder in einen Page-Wrap, um unsere grundlegende Positionierung und Zentrierung vorzunehmen. Wir können diesem Wrap auch eine relative Positionierung zuweisen, die es uns ermöglicht, die Schatten-Grafik darin zu platzieren und sie genau dort absolut zu positionieren, wo wir sie unten haben wollen.
Schritt 2: Das CSS
* { margin: 0; padding: 0; }
body { font-size: 12px; line-height: 30px; font-family: Georgia, serif;
background: url(../images/clown.jpg) top left no-repeat #fbfbfb; }
#page-wrap { width: 244px; margin: 50px auto; position: relative; }
.scroll-pane { width: 234px; overflow: auto; padding-right: 10px; height: 400px; }
.bottomshadow { position: absolute; top: 375px; left: -47px; z-index: 9999; }
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%;
background: url(../images/bar.jpg) top center repeat-y; padding: 3px; }
.jScrollPaneDrag { position: absolute; background: url(../images/ball.png) center center no-repeat;
cursor: pointer; overflow: hidden; }Wir haben hier bereits den Großteil der Theorie abgedeckt. Von Interesse sind jScrollPaneTrack und jScrollPaneDrag. Hier können Sie kontrollieren, wie der Scrollbalken und der Scroll-Griff aussehen. Ich habe eine ziemlich zerklüftete Linie als Bahn und eine kleine zerklüftete Kugel als Griff angewendet.
Schritt 3: JavaScript aktivieren
Typische Plugin-Aktivierung hier. Fügen Sie jQuery auf Ihrer Seite ein, dann das Plugin, dann rufen Sie die neue Funktion des Plugins mit den benötigten Parametern auf. In unserem Fall ist die Kugel 12 Pixel breit, also müssen wir das beim Aufruf der Funktion angeben. So funktioniert diese Funktion eben.
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript">
$(function(){
$('.scroll-pane').jScrollPane({
scrollbarWidth: 12
});
});
</script>Schritt 4: Usability und Barrierefreiheit berücksichtigen
Wenn Sie den Standard-Scrollbalken auf diese Weise entfernen, entziehen Sie den Benutzern Konsistenz und Konvention. Menschen gewöhnen sich so sehr an Benutzeroberflächenkonventionen wie Scrollbalken, dass sie möglicherweise über Ihren angepassten Scrollbalken hinwegsehen und ihn nicht einmal als Scrollbalken erkennen. Das ist offensichtlich ein Problem. Sie sollten sich ganz sicher sein, dass Ihr Scrollbalken stark als Scrollbalken erkennbar ist, wenn Sie möchten, dass die Leute ihn tatsächlich benutzen (das Beispiel in diesem Artikel könnte in dieser Hinsicht dramatisch verbessert werden). Ich verehre Jakob Nielsen sicherlich nicht (besonders seine gottlosen Websites), aber er hat einen ziemlich guten Artikel über Scrollbalken-Standards und was bei benutzerdefinierten Scrollbalken funktioniert und was nicht.
Seien Sie sich auch bewusst, dass die Standard-Scrollbalken einige integrierte Barrierefreiheitsfunktionen mit sich bringen, die Ihre neuen benutzerdefinierten nicht haben. Meistens ist dieser Plugin-Ansatz solide. Wenn JavaScript deaktiviert ist, erhalten Sie einfach normale Scrollbalken. Wenn CSS deaktiviert ist, sehen Sie all Ihre Inhalte problemlos. Wenn beides aktiviert ist, erhalten Sie Ihren schicken neuen Scrollbalken, verlieren aber die Möglichkeit, diesen Bereich mit herkömmlichen Methoden zu scrollen (wie dem Scrollrad Ihrer Maus).
Berücksichtigen Sie all dies, bevor Sie sich für einen benutzerdefinierten Ansatz entscheiden. Ich denke, es kann in vielen Designsituationen die richtige Antwort sein, bei denen ein Standard-Scrollbalken des Betriebssystems ein Design ruinieren kann.
Aus irgendeinem Grund scheint es in Ihrem Beispiel, dass das Scrollrad nicht funktioniert, obwohl es auf der jScrollPane-Seite einwandfrei funktioniert :)
Aber ein netter Trick ;)
Tatsächlich... es gibt einen Grund :D Das Mousewheel-Plugin für jQuery fehlt :P
Danke für die Tricks,
Jetzt kann ich den XP / Vista Scroll-Stil so aussehen lassen wie OS X?
Interessanter Artikel und Technik. Wenn sparsam verwendet.
Ich bin ein großer Verfechter davon, Inhalten Raum zum Atmen zu geben. Wenn es nicht in seinen Container auf einer Seite passt, sollte es wahrscheinlich seine eigene Seite haben.
Chris, ich habe eine lose verwandte Frage. Ich besuche diese Seite normalerweise mit FF auf dem Mac, wenn ich eine Seite nach unten scrolle, auf einen Link klicke, woanders hingehe und dann auf den Zurück-Button klicke, werde ich immer wieder an den Anfang der Seite zurückversetzt, egal wo ich vorher war. Aber Safari bringt mich nie an den Punkt auf der Seite zurück, an dem ich ursprünglich den Link geklickt habe. Ich glaube nicht, dass das Problem vollständig bei FF liegt, da es auf anderen Seiten nicht passiert. Wenn Sie eine Idee haben, warum das so sein könnte, würde ich es gerne wissen.
Sie kennen offensichtlich den **ernsten** Usability-Verlust bei der Verwendung eigener Scrollbalken. Aus diesem Grund werde ich keine Scrollbalken ändern. Wenn das Projekt dies von mir verlangt, muss das Projekt geändert werden.
Schöner Artikel und etwas, das ich vor Jahren in Betracht gezogen hätte, als das Ändern der Scrollbalken "cool" war! Aber jetzt würde ich sie definitiv nicht mehr ändern, meiner Meinung nach sieht es immer geschmacklos aus, wenn der Hauptscrollbalken geändert wird, und wie Mike sagte, sollte der Inhalt seine eigene Seite haben, wenn sein Container eine Scrollleiste benötigt!
Es ist gut zu sehen, dass JavaScript weiterhin Funktionen wie diese aus Flash übernimmt.
Ich dachte, das Stylen eines Scrollbalkens sei ein GROSSES Tabu im Webdesign... es erscheint mir irgendwie sinnlos.
Ich suche seit Monaten nach dieser Lösung, und Sie haben sie behandelt und sogar die Dateien bereitgestellt, die ich für mein Projekt benötige.
Obwohl ich zustimme, dass sie sparsam verwendet werden sollte, kann sie Ihre scrollbare Box fantastisch aussehen lassen!
Danke Chris.
Während Sie sagen, dass Browser im Allgemeinen die Scrollbox nicht stylen, sind in meiner Version von Firefox die Scrollbalken schwarz. Ich verwende dafür ein benutzerdefiniertes Thema – NightLaunch, glaube ich, und das scheint die Stilistik der Scrollbalken zu steuern.
Dies mag eine Ausnahme von Ihrer Aussage sein, aber wenn es einen Weg gibt, dies über ein Browser-Theme zu tun, das hauptsächlich aus CSS besteht, dann gibt es sicherlich einen Weg, die Stilistik von Scrollbalken mit browser-eigenen Stilen zu ändern?
Nur ein Gedanke, was meint ihr dazu?
Übrigens, wieder ein großartiger Beitrag Chris, sehr informativ. Ich werde hoffentlich dazu kommen, das auf einigen neuen Designs anzuwenden!
Aus Gründen der Barrierefreiheit bleibe ich lieber beim normalen, ungestylten Scrollbalken. Ich glaube, er ist Teil des Browser-Skins. Und wir als Webentwickler haben damit nichts zu tun. Wenn wir es täten, wären wir zu Theme-Entwicklern geworden.
Eine weitere coole Funktion in jScrollPane ist, dass Sie auch jquery.mousewheel.js einbinden und das Mausrad in Ihrem scrollbaren Bereich verwenden können. Es unterstützt Opera jedoch nicht richtig.
komisch. Ich kann die Leertaste oder Bild runter nicht verwenden, um nach unten zu scrollen. Es funktioniert woanders auf dieser Seite, nur nicht in diesem Artikel. Du hast meinen Computer kaputt gemacht! hehe
{:firefox 3.0.1; :mac os 10.5.2}
Netter Trick.
Es ist wirklich schade, dass es keine echte (d.h. keine JavaScript, und mit funktionierendem Scrollen) Möglichkeit gibt, dies über CSS zu tun. Ich glaube, es gibt es in IE6, mit scrollbar-base-color etc., aber das nützt heutzutage nichts. Wahrscheinlich versuchen sie, Scrollbalken so einheitlich wie möglich zu halten, aber ich denke, es wäre besser, den Leuten die Anpassung zu erlauben (nur zwei Bilder wirklich, Hintergrund und Balken).
Ich glaube nicht, dass es eine große Sünde ist, den Scrollbalken-Stil zu übernehmen, besonders wenn man die unterschiedlichen Breiten der OSX- und XP-Scrollbalken (ganz zu schweigen von jedem anderen OS) berücksichtigt. Wenn Sie einen Scrollbalken *innerhalb* des Bodys Ihrer Website haben, kann ein OS-Standard-Scrollbalken geradezu grell sein. Ich stimme zu, dass ich mir wünschte, es gäbe eine reine CSS-Möglichkeit, dies zu tun.
Während ich diesen Trick gerne verwenden würde, benutze ich eher MooTools als jQuery. MooScroll führt den gleichen Scroll-Austausch-Trick durch. Wenn jemand ähnliche Framework-Präferenzen hat, empfehle ich, es sich anzusehen; ich wollte es schon seit einiger Zeit benutzen und habe endlich eine Website, auf der ich damit spielen kann. :)
Gibt es eine Möglichkeit, den Inhaltsbereich horizontal statt vertikal scrollbar zu machen?
Hilfe ist willkommen.
Vadim.
Danke für die Datei. Oh ja, Glückwunsch zur Top-Platzierung auf delicious.com
Mach weiter so.
Danke Chris. Ich verstehe nicht, warum so viele Webdesigner so steif auf Design-'Regeln' sind. Hier ist meine einfache Regel: Wenn es gut aussieht, mach es. Wenn nicht, vermeide es. Regeln sind der Feind der Innovation.
@Jackie, weil die meisten von uns davon leben, Websites für Kunden zu entwickeln, die ein Produkt/eine Dienstleistung verkaufen. Viele dieser "Regeln" gibt es aus gutem Grund. Je schwieriger Sie eine Website für jemanden zu benutzen machen, desto schneller sinkt Ihre Chance auf eine Konversion. Der Benutzer konzentriert sich nicht mehr auf den Inhalt und die Botschaft, sondern wird durch die Benutzeroberfläche abgelenkt.
Mir fallen nur wenige Gründe ein, warum ich die Scrollbalken einer Website ändern würde. In den meisten Fällen scheue ich mich davor, sie irgendwo anders als bündig am rechten Rand des Fensters zu haben.
Es ist in Ordnung, einen "schlichten" Scrollbalken im Browserfenster selbst zu haben, warum sollten Sie das Aussehen eines Browser-Fensters ändern wollen? Es ist aufdringlich, ärgerlich, und die Leute mögen es einfach nicht. Warum denken Sie, dass MS es aus IE entfernt hat?
Es ist jedoch sinnvoll, den Scrollbalken zu ändern, wenn sich ein scrollbarer Container innerhalb Ihrer Website befindet. Sie möchten zweifellos, dass er sich für das Branding in Ihre Website einfügt. Nichts ist schlimmer, als seltsam aussehende Farben, die nicht gut zu Ihren passen, in Ihre Website zu integrieren, an deren Design und Programmierung Sie wochenlang gearbeitet haben.
Das ist schön, aber eine andere Möglichkeit ist, Mootools und das UvumiTools Scrollbar-Plugin zu verwenden. Kein Hantieren mit JavaScript und das Mausrad funktioniert sofort, ohne dass zusätzliche Skripte hinzugefügt werden müssen. Außerdem ist es gut für Leute, die andere Frameworks verwenden.
Umgekehrt könnten Sie scrollbare Container auch einfach weglassen, aber ich erkenne, dass sie in einigen Websites notwendig sind.
Ich habe noch eine andere Lösung. Ich benutze sie jedes Mal, wenn ich scrollbare Bereiche auf meiner Website brauche. Sie basiert auf Mootools und heißt ScrollControll. Es gibt auch eine zweite Version, die mit Motools 1.2 funktioniert.
Auf meiner Seite gibt es eine kleine Beschreibung, aber nur auf Deutsch, also hier ist das Beispiel. Probieren Sie es aus und viel Spaß :-)
Vor ein paar Tagen bemerkte ich, dass eine Website genau diese Technik verwendet hatte, um den Scrollbalken anzupassen. Es war das erste Mal, dass mir wirklich auffiel, dass das mit CSS und JS gemacht werden konnte.
Aber die Neuheit verflog nach etwa 2 Sekunden und ich fand es immer ärgerlicher, weil mein Scrollrad auf meiner Maus damit nicht funktionierte.
Ich denke, es ist gut, dass die Option verfügbar ist, aber ich bin sehr entschieden dagegen, sie auf einer Website zu verwenden, die meinen Respekt verdient. Ich glaube, es ist wichtig, dass Scrollbalken sowie Formularelemente denen des Betriebssystems des Benutzers eng ähneln. Aus diesem Grund versuche ich, Modifikationen auf ein Minimum zu beschränken. Der durchschnittliche Benutzer kann vertraute Elemente leichter identifizieren. Design ist sehr wichtig, aber auch Usability.
Ich kritisiere Sie keineswegs dafür, dass Sie das gepostet haben, ich mache nur eine allgemeine Aussage, dass Websites bestimmten Standards entsprechen sollten.
Aber ich bin sehr dankbar, dass Sie dieses Skript gepostet haben, weil ich neugierig war, unter die Haube zu schauen, nur um zu sehen, wie es gemacht wurde. Danke dafür.
Gute Arbeit! Aber was ist mit 100% Breite des Inhaltsbereichs?