Edle und coole benutzerdefinierte CSS-Scrollleisten: Eine Präsentation

In diesem Artikel tauchen wir in die Welt der Scrollleisten ein. Ich weiß, das klingt nicht gerade glamourös, aber vertrauen Sie mir, eine gut gestaltete Seite geht Hand in Hand mit einer passenden Scrollleiste. Die altmodische Chrome-Scrollleiste passt einfach nicht mehr so gut.

Wir werden uns die Details einer Scrollleiste ansehen und dann einige coole Beispiele betrachten.

Bestandteile einer Scrollleiste

Das ist eigentlich mehr eine Auffrischung. Es gibt eine Reihe von Beiträgen hier auf CSS-Tricks, die sich detailliert mit dem Styling benutzerdefinierter Scrollleisten in CSS befassen.

Um eine Scrollleiste zu stylen, müssen Sie mit der Anatomie einer Scrollleiste vertraut sein. Schauen Sie sich diese Illustration an.

Die beiden wichtigsten Komponenten, die Sie hier beachten sollten, sind:

1. Die Schiene ist der Hintergrund unter dem Balken.
2. Der Griff ist der Teil, den der Benutzer anklickt und herumzieht.

Wir können die Eigenschaften der gesamten Scrollleiste mit dem herstellerspezifischen Präfix::-webkit-scrollbar ändern. Wir können der Scrollleiste eine feste Breite, eine Hintergrundfarbe, abgerundete Ecken geben... viele Dinge! Wenn wir die Hauptscrollleiste einer Seite anpassen, können wir::-webkit-scrollbar direkt auf das HTML-Element anwenden.

html::-webkit-scrollbar {
  /* Style away! */
}

Wenn wir eine Scrollbox anpassen, die das Ergebnis vonoverflow: scroll ist, können wir stattdessen::-webkit-scrollbar auf dieses Element anwenden.

.element::-webkit-scrollbar {
  /* Style away! */
}

Hier ist ein schnelles Beispiel, das die Scrollleiste des HTML-Elements so stylt, dass sie breit mit einem roten Hintergrund ist.

Was ist, wenn wir nur den Griff oder die Schiene der Scrollleiste ändern wollen? Sie haben es erraten – dafür gibt es spezielle Präfix-Pseudoelemente:::-webkit-scrollbar-thumb bzw.::-webkit-scrollbar-track. Hier ist eine Vorstellung davon, was möglich ist, wenn wir all diese Dinge zusammenfügen.

Genug der Auffrischung! Ich möchte Ihnen drei Stufen des benutzerdefinierten Scrollleisten-Stylings zeigen und dann eine große Präsentation von Beispielen aus dem Internet für Inspiration eröffnen.

Einfache und edle Scrollleisten

Eine benutzerdefinierte Scrollleiste kann immer noch minimal sein. Ich habe eine Gruppe von Beispielen zusammengestellt, die das Erscheinungsbild subtil verändern, sei es durch eine leichte Farbänderung des Griffs oder der Schiene oder durch ein leichtes Styling des Hintergrunds.

Wie Sie sehen können, müssen wir beim Styling von Scrollleisten nicht verrückt werden. Manchmal reicht eine subtile Änderung aus, um das gesamte Benutzererlebnis mit einer Scrollleiste zu verbessern, die zum Gesamtbild passt.

Coole, auffällige Scrollleisten

Aber seien wir ehrlich: Es macht Spaß, ein bisschen über die Stränge zu schlagen und etwas Kreativität auszuleben. Hier sind einige seltsame und einzigartige Scrollleisten, die in manchen Fällen "zu viel" sein mögen, aber sie sind definitiv auffällig.

Noch eine...

Wie wäre es, wenn wir die Scrollleiste für den Griff in einer Achterbahnfahrt und die Schienen für die, nun ja, die Schiene nehmen!