Früher konnte man Scrollbalken in IE (z.B. v5.5) mit nicht standardmäßigen CSS-Eigenschaften wie scrollbar-base-color anpassen, die man auf dem scrollenden Element (wie dem <body>) verwendete und damit total coole Dinge machen konnte. IE hat das eingestellt.
Heute sind benutzerdefinierte Scrollbalken wieder da, aber diesmal in WebKit. Es ist mittlerweile etwas besser, da die Eigenschaften Vendor-Präfixe (z.B. ::-webkit-scrollbar) haben und das „Shadow DOM“ verwenden. Das gibt es schon seit einigen Jahren. David Hyatt hat es im Blog Anfang 2009 vorgestellt.
Die Grundlagen
Die verschiedenen Teile
Das sind die Pseudo-Elemente selbst. Die tatsächlichen Teile der Scrollbalken.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
Die verschiedenen Zustände
Das sind die Pseudo-Klassen-Selektoren. Sie ermöglichen eine spezifischere Auswahl der Teile, z.B. wenn sich der Scrollbalken in verschiedenen Zuständen befindet.
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactiveIch werde diesen Abschnitt aus Davids Blogbeitrag im WebKit-Blog übernehmen, da er jeden Teil gut erklärt.
:horizontal – Die horizontale Pseudo-Klasse wird auf alle Scrollbalkenteile angewendet, die eine horizontale Ausrichtung haben.
:vertical – Die vertikale Pseudo-Klasse wird auf alle Scrollbalkenteile angewendet, die eine vertikale Ausrichtung haben.
:decrement – Die Dekrement-Pseudo-Klasse wird auf Buttons und Track-Teile angewendet. Sie gibt an, ob der Button oder das Track-Teil die Position der Ansicht beim Gebrauch verringert (z.B. nach oben bei einem vertikalen Scrollbalken, nach links bei einem horizontalen Scrollbalken).
:increment – Die Inkrement-Pseudo-Klasse wird auf Buttons und Track-Teile angewendet. Sie gibt an, ob ein Button oder das Track-Teil die Position der Ansicht beim Gebrauch erhöht (z.B. nach unten bei einem vertikalen Scrollbalken, nach rechts bei einem horizontalen Scrollbalken).
:start – Die Start-Pseudo-Klasse wird auf Buttons und Track-Teile angewendet. Sie gibt an, ob das Objekt vor dem Thumb platziert ist.
:end – Die End-Pseudo-Klasse wird auf Buttons und Track-Teile angewendet. Sie gibt an, ob das Objekt nach dem Thumb platziert ist.
:double-button – Die Double-Button-Pseudo-Klasse wird auf Buttons und Track-Teile angewendet. Sie wird verwendet, um zu erkennen, ob ein Button Teil eines Button-Paares ist, das sich am selben Ende eines Scrollbalkens befindet. Bei Track-Teilen gibt sie an, ob das Track-Teil an ein Button-Paar angrenzt.
:single-button – Die Single-Button-Pseudo-Klasse wird auf Buttons und Track-Teile angewendet. Sie wird verwendet, um zu erkennen, ob sich ein Button allein am Ende eines Scrollbalkens befindet. Bei Track-Teilen gibt sie an, ob das Track-Teil an einen einzelnen Button angrenzt.
:no-button – Wird auf Track-Teile angewendet und gibt an, ob das Track-Teil bis zum Rand des Scrollbalkens reicht, d.h. ob sich an diesem Ende des Tracks kein Button befindet.
:corner-present – Wird auf alle Scrollbalkenteile angewendet und gibt an, ob eine Scrollbalkenecke vorhanden ist.
:window-inactive – Wird auf alle Scrollbalkenteile angewendet und gibt an, ob das Fenster, das den Scrollbalken enthält, gerade aktiv ist. (In neueren Nightly-Builds gilt diese Pseudo-Klasse auch für ::selection. Wir planen, sie auf beliebigen Inhalt zu erweitern und als neue Standard-Pseudo-Klasse vorzuschlagen.)
Alles zusammen
Diese Pseudo-Elemente und Pseudo-Klassen-Selektoren arbeiten zusammen. Hier sind einige zufällige Beispiele.
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
}Sehr einfaches Beispiel
Um einen wirklich einfachen benutzerdefinierten Scrollbalken zu erstellen, könnten wir Folgendes tun:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}In dem wir diesen Effekt auf einem einfachen Div mit vertikal überfließendem Text erhalten würden.
In Aktion
Schauen Sie sich die sehr dezenten und schönen Scrollbalken auf dem Blog von Tim Van Damme an, Maxvoltar (Update September 2012: Tim's Website verwendet dieses Design nicht mehr)
Das besonders Schöne hierbei ist, dass sich der Scrollbalken auf dem Body-Element befindet, aber der Scrollbalken nicht oben, unten oder rechts am Browserfenster klebt, wie es normalerweise bei Scrollbalken der Fall ist. Ich habe eine Testseite mit kopier- und einfügbarem Code erstellt, um einen ähnlichen Effekt zu erzielen.
Auf Forrst verwenden sie benutzerdefinierte Scrollbalken für Code-Snippets, die ebenfalls ziemlich gut aussehen. Sie sind weniger visuell aufdringlich und kämpfen daher nicht so sehr mit der Code-Hervorhebung.
Verwandt
- Dion Almaer hat eine nützliche kleine „Debug“-Seite für Scrollbalken mit allen Teilen in fetten Farben, um zu sehen, was was ist. (aus diesem Artikel)
- Ähnlicher Artikel auf Beautiful Pixels.
- Google Wave hat etwas übertrieben damit, als das noch eine Sache war.
Schön, aber style.css … 404 ;)
Die Website von Max Voltar funktioniert in Chrome.
Das trifft auf Ihr Beispiel nicht zu.
Dasselbe hier mit Chrome 10.
Bei mir funktioniert es in Chrome 10 einwandfrei.
Ein schöner Trick, der Websites definitiv eine nette Note verleiht.
Funktioniert in Chrome einwandfrei, Kumpel.
danke
Was, wenn ich benutzerdefinierte Scrollbalken für Nicht-WebKit-Browser anzeigen wollte?
Entweder
1) Gar nicht. Oder,
2) Google nach einer JavaScript-basierten Lösung suchen.
Wenn Sie wirklich verzweifelt sind, Flash oder JavaScript (irgendwie, aber auf keine Weise, die ich kenne).
Ich kann es in Chrome 11 oder Safari 5 (Mac) nicht reproduzieren.
Ich habe zuvor das Plugin unter dem untenstehenden Link verwendet, es funktioniert ziemlich gut. Es ist nicht die Methode, die Chris oben verwendet, aber es ist ein anständiges JS-basiertes Plugin.
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Sul
Noch ein zeitnaher Artikel, Chris!
Der Punkt, dass dies in anderen Nicht-WebKit-Browsern nicht funktioniert, ist leider wahr – ich habe kürzlich ziemlich viel Zeit damit verbracht, eine Lösung speziell für die Verwendung in Textfeldern zu finden.
Es gibt einige JavaScript/jQuery-Lösungen und wahrscheinlich eine der besten, die ich gefunden habe, war JScrollPane.
Was Textfeldlösungen betrifft, habe ich leider nicht viel herausgefunden, aber ich bin entschlossen, auch dafür etwas herauszufinden!
Toller Beitrag Chris, vielen Dank!
Gerüchten zufolge soll OS X Lion, das dieses Jahr herauskommt, die glänzenden, flüssig-blauen Scrollbalken in OS X sowieso abschaffen. Sie sollen ein flaches, graues iOS-ähnliches Gefühl annehmen. Wie Sie sagten, schreien die blauen „Thumbs“ wirklich nach Aufmerksamkeit. Das wird eine willkommene Verbesserung sein.
Ihr Demo ist sowohl in Chrome als auch in Safari unter OSX kaputt.
Das liegt daran, dass ich ein Idiot bin. Behoben. Vergraben.
Gibt es einen Hinweis auf die Möglichkeit, dass dies auch in anderen Browsern verfügbar wird? Sogar in IE hoffe ich :)
IE unterstützt das Styling des Scrollbalkens schon seit Jahren
Körper {
scrollbar-face-color: #eee;
scrollbar-highlight-color: #fff;
scrollbar-3dlight-color: #ccc;
scrollbar-darkshadow-color: #fff;
scrollbar-shadow-color: #aaa;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #eee;
}
Quelle
http://www.computing.net/answers/webdevel/how-to-change-scroll-bar-look/740.html
Nur die Farbe, aber
Schade, dass diese Art von Überlauf auf iOS nicht funktioniert… Gibt es eine Idee, wie man Touch-Events aktiviert?
Ich hatte dasselbe Problem, habe aber herausgefunden, dass @media-Abfragen helfen können.
@only screen and (max-device-width:480px){
//Fügen Sie hier Ihre Scrollbar-CSS ein //
}
Funktioniert für mich.
Bitte löschen Sie den letzten Kommentar. Muss wohl vernebelt gewesen sein oder so.
Oder Chrome hat eine gecachte Version verwendet.
Hallo Chris, danke dafür, ich fand es wirklich toll und habe es sofort in meinem Projekt ausprobiert!
Ich hoffe, -moz- folgt bald, es kann das Design einzigartiger machen. Ich wollte das schon immer und habe ein paar Flash-Scrollbalken gesehen, die fantastisch aussahen, aber unheimlich in der Formatierung waren, ha! Aber CSS3 ist sehr spannend… und ich würde es gerne nutzen.
Ein paar Dinge, die ich hervorheben möchte…
Wie wir wissen, funktioniert es erst richtig, wenn Sie position: absolute; im Body-Bereich einfügen. Wenn wir right: 20px; setzen, sieht es nur für -webkit- Browser gut aus! Wenn Sie dies beispielsweise in Mozilla sehen, wird es nicht standardmäßig aussehen und für den Benutzer etwas verwirrend sein… Also habe ich right: 0; gesetzt, um die Dinge auszugleichen. (Wenn Sie einen besseren Weg wissen, lassen Sie es mich bitte wissen, ich mag es 20 Pixel nach links.)
Eine weitere Sache betrifft den .body. Wir sollten besser top und bottom auf 0 setzen, um die Seite vollständig in der Höhe zu haben und sie durch margin im
::-webkit-scrollbar-track { margin: 20px 0; }
Liegt es an mir oder kann man in Ihrem Beispiel das Mausrad nicht benutzen?
Bei mir scrollt es nach unten, aber nicht nach oben.
Löschen Sie das! Es funktioniert nach oben, aber nicht nach unten.
Wie wäre es mit der Behebung defekter Funktionen in WebKit, anstatt neue einzuführen!
d.h. die Tatsache, dass der Cursorstil bei einem area-Tag in WebKit nie beachtet wird..
Scheiß….
Ist das kaputt? Ich habe bisher keine Probleme gesehen. Ich habe zwar nicht versucht, viele fortgeschrittene Dinge zu tun. Ich würde denken, der kaputteste Teil ist, dass es unklar und undokumentiert ist, welche Eigenschaften die verschiedenen Teile akzeptieren.
Was den area-Bug betrifft, davon hatte ich noch nichts gehört, aber es klingt tatsächlich fehlerhaft. Das Beste ist natürlich, ein reduziertes Testfall zu erstellen und als Bug einzureichen (http://www.webkit.org/quality/reporting.html). Wenn er bereits gemeldet wurde, ist die Einreichung Ihres Testfalls immer noch hilfreich, da er zusätzliches Material zum Testen liefert und das Problem auf mehr Interesse stößt.
Hier ist eine gute Sammlung von vorgefertigten Scrollbalken. Einer sieht aus wie die iTunes-Scrollbalken (Marmor) und der andere ist im Grunde nur eine dunkle Version davon. Die Download-Links sind kaputt, aber ich habe die tatsächlichen Downloads gefunden. Marmor Schwarz.
Vergessen Sie nicht Opera, das seit vielen Jahren auch einige Tweaks an Scrollbalken vornehmen kann. Ich habe es vor 6 Jahren auf meiner Website verwendet.
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-track-color
scrollbar-darkshadow-color
Nicht so gut wie die Implementierung von WebKit, aber wenn Sie damit spielen möchten.
Ist es möglich, ein Bild auf dem Scrollbalken zu platzieren?
Ich habe Malihus jQuery-Plugin auf dieser Website verwendet: http://bitteart.dk/, um die Galerie eines Kunden horizontal zu scrollen. Es funktioniert ziemlich gut in allen modernen Browsern (ich habe es in alten Browsern nicht überprüft).
Plugin-Seite: http://manos.malihu.gr/jquery-custom-content-scroller
Das ist eine sehr alte Methode…
Hier ist die neue und auch die Anpassung Ihrer eigenen Scrollbalken…
http://www.hesido.com/web.php?page=customscrollbar
Wow, nette Tutorials, hätte nie gedacht, dass es so einfach ist, wie es hier zu finden ist. :)
Was ist los mit dieser Website? Der gesamte Text ist in allen meinen Browsern unlesbar. Bitte verwenden Sie eine ordentliche Schriftart oder zumindest eine lesbare Fallback-Option.
Hallo, darf ich etwas sagen: Es gibt normalerweise wirklich gute Dinge mit CSS3, aber es ist normalerweise dasselbe: nur Webkit oder „nur“ Mozilla, wie text-transform oder der Scrollbalken-Custom hier. Also, was sollen wir damit machen, 2 Jahre warten, bis das Konzept in jedem Browser ankommt…? Danke für den Tipp, gute Sachen… für Webkit-Browser
Wieder einmal erstaunen Sie mich mit Ihren Funden und Tutorials.. danke für eine großartige Website, Chris
WebKit-Scroller waren seit Mitte 2010 Teil meines persönlichen Blogs (ich habe sie vor einiger Zeit entfernt). Schöner Artikel, Chris.
Kann es unter FF4 nicht zum Laufen bringen, das Beispiel funktioniert auch nicht
Siehe Titel des Artikels.
Danke für die Erwähnung, Chris! Wenn doch nur jeder Browser diese Dinge unterstützen würde. Mit der Zeit, nehme ich an.
Kyle
Oh Gott nein. Das könnte das Schlimmste an WebKit sein! Scrollbalken sind in jeder App gleich… wenn man ihr Aussehen ändert, wüsste der Durchschnittsbürger nicht, was es ist.
Könnte schrecklich für die Benutzerfreundlichkeit sein.
Haben Sie dazu Forschungsergebnisse?
Ich weiß, was Sie meinen. Standardaussehen sind Benutzern vertraut, sie haben sie schon einmal verwendet, also wissen sie, wie sie sie wieder verwenden können.
Aber diese Anpassungen erfinden das Konzept eines Scrollbalkens nicht komplett neu. Sie sehen immer noch im Grunde wie Scrollbalken aus, wenn man es richtig macht. Ich wette, die meisten Benutzer scrollen mit einer Art Mausbewegung, in diesem Fall würden sie sehen, wie dieser benutzerdefinierte Scrollbalken scrollt und es sofort verstehen.
Aber jetzt spekuliere ich nur.
Ja, ich habe auch spekuliert. Das Einzige, worauf ich mich stützte, war, dass die Änderung von Nutzererwartungen immer schlecht war (habe das nur aus Nielsens Papieren gelesen).
Der Punkt bei einem Scrollrad ist, dass es je nach Position des Cursors scrollt. Wenn Sie nicht wissen, dass etwas scrollbaren Inhalt hat, könnte ein nicht-technischer Benutzer leicht von seiner Maus/Trackpad genervt werden.
Was denken Sie?
Auch, Entschuldigung Kumpel, ich wollte nicht unhöflich klingen! Es sieht nach einem wirklich coolen Trick für das aus, was er tut, danke fürs Teilen!
Ich liebe die benutzerdefinierten Scrollbalken, aber gibt es eine Möglichkeit, das Problem zu lösen, dass man das Browserfenster anklicken muss, bevor die Pfeiltasten die Seite scrollen? Das ist eine Art Dealbreaker.
Ich finde diese wirklich cool, besonders die Verwendung auf Forrst bei Code-Beispielen, die mir mit Apple Aqua-Scrollbalken oder so etwas ziemlich hässlich erscheinen.
Ich muss den meisten Kommentatoren bei HN zustimmen (http://news.ycombinator.com/item?id=2513578), dass das Styling von Scrollbalken normalerweise eine schlechte Idee ist.
Wie „stuk“ dort sagte: „Das Problem bei der Zulassung der Anpassung von Scrollbalken ist, dass die meisten Leute sie schlechter machen werden.“
In der Tat.
Toller Artikel, ich bin seit einem Jahr in der Webentwicklung mit HTML und CSS, also bin ich ziemlich neu in all diesen Dingen, aber es fühlt sich gut an, Zugang zu Informationen wie diesen gut erklärt zu haben.
Wie viele sagten, ist es schade, dass dies nur unter Webkit funktioniert.
Danke Chris für die tollen Sachen hier!
Das ist es, wonach ich seit etwa 6 Monaten gesucht habe, vielen Dank… nur eine Frage, wie ändere ich die Farbe von rot zu so etwas wie dunkelgrau?
Vielen Dank im Voraus
Damit funktioniert „background-attachment: scroll“ nicht. Das liegt an „overflow-y: scroll“ im „body“… Gibt es eine Lösung?
Ich habe gerade bemerkt, dass ich in Chrome 11.0.696.65 auf Mac nur Vollfarben für die Scrollbalken verwenden kann. Ich musste alle rgba-Aufrufe entfernen, damit Chrome funktionierte. Ansonsten wurde ein halbtransparentes Loch im Browser erstellt, das versuchte, meinen Desktop-Hintergrund darzustellen… irgendwie seltsam.
Es gibt auch einen Bug in WebKit, bei dem Scrollbalken in einem iframe nicht angezeigt werden: http://code.google.com/p/chromium/issues/detail?id=57292
Wenn Sie einen Scroll-Event-Listener verwenden, seien Sie sich bewusst, dass er nach dem Styling des Scrollbalkens aus dem normalen WebKit-DOM entfernt wird und nicht mehr über JavaScript (oder jQuery) auswählbar ist – zumindest ist das das, was ich bisher herausgefunden habe.
Kommentieren Sie zum Beispiel die -webkit-scrollbar-Styles im Demo aus und binden Sie eine Scroll-Spur an das Fenster:
$(window).scroll(function() {
console.log($(window).scrollTop(),$(window).height());
});
Entkommentieren Sie dann die -webkit-scrollbar-Styles und Sie werden feststellen, dass der Scroll-Event-Listener nicht mehr ausgelöst wird. Wenn Sie das Bind-Event auf „body“ ändern, wird der Scroll-Event-Listener ausgelöst, aber scrollTop ist auf 0 fixiert und height ist auf die Höhe des sichtbaren Fensters fixiert. Ich erhalte ähnliche Ergebnisse, wenn ich $(„html“).scrollTop(); oder $(„body“).scrollTop(); innerhalb des Events verfolge.
Obwohl Sie im Web-Inspektor sehen können, dass der Scrollbalken am html-Tag angebracht ist, konnte ich keinen gültigen Selektor finden, mit dem ich diese Werte wieder erfassen könnte. Ich habe sogar versucht, das $(„::-webkit-scrollbar-track-piece“)-Objekt auszuwählen, aber leider nein.
Hallo, ist das nicht irgendwie das, was jeder sucht und ist es in allen Browsern machbar? Die Website ist auf Französisch, was bedeutet, dass ich sie nicht lesen kann, aber der Scrollbalken funktioniert für so wenig Code ziemlich gut, und ich habe ihn nicht benutzt, also kann ich nicht sagen, was seine Nachteile wären… Jemand bereit, einen Blick darauf zu werfen?
http://carotut.voila.net/tutoriel/scrollbar_en_images/index.htm
Das ist der Link! Bitte antworten Sie, da ich ihn erst verwende, wenn jemand eine oder mehrere meiner oben genannten Fragen beantwortet hat
Schöne und klare Lösung, danke
funktioniert nicht in Firefox
Siehe Titel des Beitrags.
funktioniert nicht in Firefox
SUPER GROSSARTIGER Beitrag! #danke
Ist es möglich, den Scrollbalken über den Inhalt zu legen? Der gewünschte Effekt wäre, das „Verschiebungs“-Problem zu beheben, bei dem einige Seiten keinen Scrollbalken benötigen. Es wäre schön, wenn wir den Scrollbalken über den „Inhalt“ (eigentlich nur eine leere Rille in meinem Fall) legen könnten, anstatt die Seite nach links zu verschieben.
http://aokp.co ist ein gutes Beispiel dafür.
Hallo Freunde,
wenn ich diesen Code verwende
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
wird es auf alle Scrollbalken angewendet, wie kann ich es auf ein bestimmtes Div anwenden???????
Hey, nettes Tutorial :-)
Aber ich habe eine Frage: Wie realisierst du diesen Rand von deinem rechten Rand in deinem Beispiel (mit dem roten Scroll-Thumb)?
Ich habe versucht, es bei -webkit-scrollbar-thumb (mit
margin: 30px) und auch bei -webkit-scrollbar und body zu verwenden, aber der Scrollbalken ist immer beiright: 0px.Können Sie mir helfen?
funktioniert nur in Chrome :(
Kumpel, wie erstellt man jetzt benutzerdefinierte Scrollbalken in FF und IE??
Hey, es funktioniert gut und ist cool :)
Wie kann ich die Höhe des Thumbs reduzieren?
Hey, es funktioniert nur in Chrome :( also wie kann ich benutzerdefinierte Scrollbalken in Firefox und IE erstellen?
Das funktioniert nicht in Firefox...
Vergraben, da dies bereits behandelt wurde. (Siehe Titel des Artikels).