In diesem Artikel tauchen wir in die Welt der Scrollbars ein. Ich weiß, es klingt nicht allzu glamourös, aber vertrauen Sie mir, eine gut gestaltete Seite geht Hand in Hand mit einer passenden Bildlaufleiste. Die altmodische Chrom-Bildlaufleiste passt einfach nicht so sehr hinein.
Wir werden uns die wesentlichen Details einer Bildlaufleiste ansehen und uns dann einige coole Beispiele ansehen.
Komponenten einer Bildlaufleiste
Das ist wirklich eher eine Auffrischung. Es gibt ein Haufen Posts hier auf CSS-Tricks die ins Detail gehen, wenn es um benutzerdefiniertes Scrollbar-Styling in CSS geht.
Um eine Bildlaufleiste zu gestalten, müssen Sie mit der Anatomie einer Bildlaufleiste vertraut sein. Schauen Sie sich diese Abbildung an:
Die zwei Hauptkomponenten, die hier zu beachten sind, sind:
- Das verfolgen sind ist der Hintergrund unter der Leiste.
- Das Daumen ist der Teil, den der Benutzer anklickt und herumzieht.
Wir können die Eigenschaften der gesamten Bildlaufleiste mit dem Herstellerpräfix ändern::-webkit-scrollbar Wähler. Wir können der Bildlaufleiste eine feste Breite, Hintergrundfarbe, abgerundete Ecken… viele Dinge geben! Wenn wir die Hauptbildlaufleiste einer Seite anpassen, können wir verwenden ::-webkit-scrollbar direkt am HTML-Element:
html::-webkit-scrollbar {
/* Style away! */
}Wenn wir ein Bildlauffeld anpassen, ist dies das Ergebnis von overflow: scroll, dann können wir verwenden ::-webkit-scrollbar auf diesem Element stattdessen:
.element::-webkit-scrollbar {
/* Style away! */
}Hier ist ein kurzes Beispiel, das die Bildlaufleiste des HTML-Elements so gestaltet, dass sie breit ist und einen roten Hintergrund hat:
Was ist, wenn wir nur den Daumen oder die Spur der Bildlaufleiste ändern möchten? Sie haben es erraten – wir haben spezielle vorangestellte Pseudo-Elemente für diese beiden: ::-webkit-scrollbar-thumb und ::-webkit-scrollbar-track, beziehungsweise. Hier ist eine Vorstellung davon, was möglich ist, wenn wir all diese Dinge zusammenfügen:
Genug geputzt! Ich möchte Ihnen drei Stufen des benutzerdefinierten Bildlaufleistenstils zeigen und dann eine große alte Vitrine mit Beispielen aus dem gesamten Internet zur Inspiration öffnen.
Einfache und elegante Bildlaufleisten
Eine benutzerdefinierte Bildlaufleiste kann immer noch minimal sein. Ich habe eine Gruppe von Beispielen zusammengestellt, die das Erscheinungsbild subtil verändern, sei es mit einer leichten Farbänderung des Daumens oder der Spur oder einem leichten Styling des Hintergrunds.
Wie Sie sehen können, müssen wir beim Stylen der Bildlaufleisten nicht verrückt werden. Manchmal reicht eine subtile Änderung aus, um das allgemeine Benutzererlebnis mit einer Bildlaufleiste zu verbessern, die zum Gesamtthema passt.
Coole auffällige Bildlaufleisten
Aber geben wir es zu: Es macht Spaß, ein wenig über Bord zu gehen und etwas Kreativität zu üben. Hier sind einige seltsame und einzigartige Bildlaufleisten, die in manchen Fällen „zu viel“ sein könnten, aber sie sind auf jeden Fall ein Blickfang.
Einer noch…
Wie wäre es, wenn wir die Bildlaufleiste für eine Drehung in einem Zug für den Daumen und Spuren für die, nun ja, die Spur nehmen!
