CSS - Scrollbars: A Beginner's Guide

Hallo da, zukünftige Webdesign-Zauberer! Heute tauchen wir in die magische Welt der CSS-Scrollbars ein. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – ich werde dein freundlicher Guide auf dieser Reise sein, und am Ende wirst du Scrollbars wie ein Profi stylen können!

Inhaltsverzeichnis

1. Einführung in Scrollbars
2. Wie stylt man Scrollbars?
3. Scrollbar-Selektoren
4. Erstellen einer benutzerdefinierten Scrollbar
5. Styling einer CSS-Scrollbar
6. CSS-Scrollbar-zugehörige Eigenschaften

Einführung in Scrollbars

Bevor wir ins Detail gehen, lassen wir uns über das, was Scrollbars sind, unterhalten. Du hast sie jeden Tag beim Surfen im Internet gesehen – sie sind diese kleinen Leisten an der Seite oder am unteren Rand einer Webseite, die es dir ermöglichen, nach oben, unten, links oder rechts zu scrollen, wenn mehr Inhalt vorhanden ist, als auf deinem Bildschirm gleichzeitig angezeigt werden kann.

Stell dir vor, du könntest mit einem Zauberstab wedeln und das Aussehen dieser Scrollbars ändern. Genau das ist, was wir heute mit CSS lernen werden!

Wie styelt man Scrollbars?

Das Styling von Scrollbars mit CSS ist so, als würde man deiner Webseite ein Makeover geben. Es ist eine Möglichkeit, deine Website hervorzuheben und ein einzigartiges Benutzererlebnis zu bieten. Lassen wir mit einem einfachen Beispiel beginnen:

/* Dies applies sich auf den gesamten Body deiner Webseite */
body::-webkit-scrollbar {
width: 12px;               /* Breite der gesamten Scrollbar */
}

body::-webkit-scrollbar-track {
background: orange;        /* Farbe des Trackbereichs */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* Farbe der Scroll-Leiste */
border-radius: 20px;       /* Rundheit der Scroll-Leiste */
border: 3px solid orange;  /* Erzeugt Abstand um die Scroll-Leiste */
}

In diesem Beispiel sagen wir dem Browser:

1. Die Scrollbar 12 Pixel breit zu machen
2. Den Track (der Bereich, auf dem die Leiste gleitet) orange zu färben
3. Die Leiste (der Teil, den du zum Scrollen greifst) blau zu machen
4. Der Leiste abgerundete Ecken zu geben
5. Ein orangefarbenes Rand um die Leiste hinzuzufügen

Pretty cool, oder? Aber wartet, es gibt mehr!

Scrollbar-Selektoren

Um Scrollbars zu stylen, verwenden wir spezielle Selektoren. Denk daran, diese als magische Wörter, die CSS mitteilen, welchen Teil der Scrollbar geändert werden soll. Hier sind die wichtigsten:

Selektor	Beschreibung
::-webkit-scrollbar	Stylt die gesamte Scrollbar
::-webkit-scrollbar-button	Stylt die Knöpfe auf der Scrollbar (Pfeile, die nach oben und unten zeigen)
::-webkit-scrollbar-track	Stylt den Track (Fortschrittsbalken) der Scrollbar
::-webkit-scrollbar-track-piece	Stylt den Teil des Tracks (Fortschrittsbalken), der nicht von der Leiste bedeckt wird
::-webkit-scrollbar-thumb	Stylt die ziehbare Scroll-Leiste
::-webkit-scrollbar-corner	Stylt die untere Ecke der Scrollbar, wo sich horizontale und vertikale Scrollbars treffen
::-webkit-resizer	Stylt die ziehbare Größenänderungsleiste, die in der unteren Ecke einiger Elemente erscheint

Erstellen einer benutzerdefinierten Scrollbar

Nun, da wir unsere magischen Wörter (Selektoren) kennen, lassen's uns eine lustige, benutzerdefinierte Scrollbar erstellen:

/* Lassen's eine neonartige Scrollbar machen! */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

In diesem Beispiel haben wir eine scrollbar erstellt, die wie aus einem Cyberpunk-Film aussieht! Der Track ist schwarz mit einem subtilen Innenschatten und die Leiste hat einen Gradienten, der sich ändert, wenn du darüber fährst. Wende diese Klasse auf jedes Element mit Überlauf an, und beobachte das Magische geschehen!

Styling einer CSS Scrollbar

Lassen's den Prozess des Stylings einer Scrollbar in Schritte aufteilen:

1. Wähle dein Ziel: Entscheide, ob du die Scrollbar für die ganze Seite (verwende body) oder nur ein bestimmtes Element (verwende eine Klasse oder ID) stylen möchtest.

2. Setze die Breite: Verwende den ::-webkit-scrollbar Selektor, um die gesamte Breite der Scrollbar zu setzen.

3. Stylte den Track: Verwende ::-webkit-scrollbar-track, um den Hintergrund, Schatten hinzuzufügen oder andere Stile für den Track zu setzen.

4. Designe die Leiste: Verwende ::-webkit-scrollbar-thumb, um die ziehbare Teil der Scrollbar zu stylen. Hier kannst du kreativ mit Farben, Gradienten und Formen werden.

5. Füge Interaktivität hinzu: Verwende Pseudo-Klassen wie :hover oder :active, um das Erscheinungsbild der Scrollbar zu ändern, wenn Benutzer mit ihr interagieren.

Hier ist ein Beispiel, das alles zusammenbringt:

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

Dies erstellt eine schicke, moderne Scrollbar für jedes Element mit der cool-scroll Klasse. Die Scrollbar ist etwas breiter als Standard, hat abgerundete Ecken und dunkelt, wenn du darüber fährst.

CSS-Scrollbar-zugehörige Eigenschaften

Während wir uns auf WebKit-Browser (wie Chrome und Safari) konzentriert haben, gibt es einige standardmäßige CSS-Eigenschaften, die in verschiedenen Browsern funktionieren. Hier ist eine Tabelle dieser Eigenschaften:

Eigenschaft	Beschreibung
scrollbar-width	Setzt die Breite der Scrollbar (nur für Firefox)
scrollbar-color	Setzt die Farbe der Scrollbar (nur für Firefox)
overflow	Spezifiziert, was zu tun ist, wenn der Inhalt den Rahm des Elements überfließt
overflow-x	Spezifiziert, was mit den linken/rechten Rändern des Inhalts geschehen soll, wenn er den Inhaltbereich des Elements überfließt
overflow-y	Spezifiziert, was mit den oberen/unteren Rändern des Inhalts geschehen soll, wenn er den Inhaltbereich des Elements überfließt

So könnte man sie verwenden:

/* Für Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* Für andere Browser */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

Dieser Code richtet eine konsistente Scrollbar-Stilung in verschiedenen Browsern ein. Es ist dünn, mit einem helleren Track und einer dunkleren Leiste.

Und das war's, Leute! Du hast gerade deine CSS-Fähigkeiten aufgestockt und gelernt, wie man Scrollbars stylt. Denke daran, mit großer Macht kommt große Verantwortung – verwende diese Techniken weise, um das Benutzererlebnis zu verbessern, nicht um ablenkende oder schwer zu bedienende Schnittstellen zu erstellen.

Weiters experimentieren, weiter lernen und vor allem Spaß dabei haben! Wer weiß, vielleicht wird die nächste große webdesign-Trend deine einzigartig gestaltete Scrollbar sein. Viel Spaß beim Coden!

Credits: Image by storyset