Scrollbar-Styling mit ::-webkit-scrollbar
Passen Sie das Erscheinungsbild von Scrollbars mit WebKit-Pseudoelementen und der Eigenschaft scrollbar-color an.
Scrollbar-Styling mit ::-webkit-scrollbar ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Übersicht zur Scrollbar-Gestaltung
Browser stellen standardmäßig Scrollbars dar, die sich je nach Betriebssystem unterscheiden. Mit CSS lässt sich das Erscheinungsbild von Scrollbars mithilfe nicht standardisierter WebKit-Pseudoelemente und moderner standardisierter Eigenschaften anpassen.
::-webkit-scrollbar
Das Wurzel-Pseudoelement für die gesamte Scrollbar. Legen Sie die Breite (vertikal) und die Höhe (horizontal) fest:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-track
Der Track ist der Hintergrundkanal, entlang dessen sich der Thumb bewegt:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-thumb
Der Thumb ist der ziehbare Scrollindikator:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Vollständige benutzerdefinierte Scrollbar
Eine vollständige Implementierung einer benutzerdefinierten Scrollbar:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Moderner Standard: scrollbar-color
scrollbar-color ist eine standardisierte Eigenschaft, die von Firefox unterstützt wird. Sie legt die Farben von Thumb und Track in einer Deklaration fest:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Moderner Standard: scrollbar-width
scrollbar-width steuert die Größe der Scrollbar mithilfe von Schlüsselwortwerten:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Browserübergreifende Scrollbar-Gestaltung
Verwenden Sie für eine vollständige browserübergreifende Unterstützung beide Ansätze:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Scrollbars ausblenden und Scrollen beibehalten
Machen Sie ein Element scrollbar, blenden Sie die Scrollbar aber visuell aus:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Scrollbars im Dark Mode
Verwenden Sie die CSS-Eigenschaft color-scheme, um Scrollbars im dunklen, nativen Betriebssystemstil ohne eigene Gestaltung zu erhalten:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>Hinweis zur Barrierefreiheit
Machen Sie Scrollbars nicht so klein oder unsichtbar, dass das Scrollen schwer erkennbar ist. Ausgeblendete Scrollbars sind für Touch-First-Designs akzeptabel, können auf Desktopgeräten aber verwirrend sein.
Kurzer Test
Welche standardisierte CSS-Eigenschaft legt die Farben von Scrollbars fest und wird von Firefox unterstützt?
Zusammenfassung
Passen Sie Scrollbars mit den Pseudoelementen ::-webkit-scrollbar (WebKit) sowie den standardisierten Eigenschaften scrollbar-color/scrollbar-width (Firefox/moderne Browser) an. Verwenden Sie beide Ansätze für vollständige browserübergreifende Unterstützung. Verwenden Sie scrollbar-width: none zusammen mit dem WebKit-Gegenstück, um Scrollbars auszublenden und die Scrollfunktion beizubehalten.
Häufig gestellte Fragen
Ist die Lektion „Scrollbar-Styling mit ::-webkit-scrollbar“ kostenlos?
Ja — der vollständige Text von „Scrollbar-Styling mit ::-webkit-scrollbar“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Scrollbar-Styling mit ::-webkit-scrollbar“?
Passen Sie das Erscheinungsbild von Scrollbars mit WebKit-Pseudoelementen und der Eigenschaft scrollbar-color an. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Scrollbar-Styling mit ::-webkit-scrollbar“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- overflow: hidden, scroll, auto, clip
- scroll-behavior: smooth
- scroll-snap-type und scroll-snap-align
- Scrollbar-Styling mit ::-webkit-scrollbar