Scrollbar-styling met ::-webkit-scrollbar
Pas het uiterlijk van scrollbars aan met WebKit-pseudo-elementen en de eigenschap scrollbar-color.
Scrollbar-styling met ::-webkit-scrollbar is een gratis CSS Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Overzicht van stijlen voor schuifbalken
Browsers geven standaardschuifbalken weer die per besturingssysteem verschillen. Met CSS kunt u het uiterlijk van schuifbalken aanpassen met niet-standaard pseudo-elementen van WebKit en de moderne standaardeigenschappen.
::-webkit-scrollbar
Het hoofdpseudo-element voor de volledige schuifbalk. Stel de breedte (verticaal) en hoogte (horizontaal) in:
<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
De track is het achtergronddomein waarover de schuifknop beweegt:
<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
De schuifknop is de versleepbare schuifindicator:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Volledige aangepaste schuifbalk
Een volledige implementatie van een aangepaste schuifbalk:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Moderne standaard: scrollbar-color
scrollbar-color is de gestandaardiseerde eigenschap die door Firefox wordt ondersteund. Hiermee stelt u de kleuren van de schuifknop en de track in één declaratie in:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Moderne standaard: scrollbar-width
scrollbar-width bepaalt de grootte van de schuifbalk met trefwoordwaarden:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Schuifbalkstijlen voor meerdere browsers
Gebruik beide benaderingen voor volledige ondersteuning in meerdere browsers:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Schuifbalken verbergen maar schuiven behouden
Maak een element schuifbaar, maar verberg de schuifbalk visueel:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Schuifbalken in de donkere modus
Gebruik de CSS-eigenschap color-scheme voor donkere schuifbalken in de stijl van het besturingssysteem, zonder aangepaste stijlen:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>Herinnering over toegankelijkheid
Maak schuifbalken niet zo klein of onzichtbaar dat het moeilijk wordt om te ontdekken dat u kunt schuiven. Verborgen schuifbalken zijn aanvaardbaar voor ontwerpen die primair op aanraking zijn gericht, maar kunnen op desktops verwarrend zijn.
Korte controle
Welke gestandaardiseerde CSS-eigenschap stelt de kleuren van schuifbalken in en wordt door Firefox ondersteund?
Samenvatting
Pas schuifbalken aan met de pseudo-elementen ::-webkit-scrollbar (WebKit) en de standaardeigenschappen scrollbar-color/scrollbar-width (Firefox/moderne browsers). Gebruik beide voor volledige ondersteuning in meerdere browsers. Gebruik scrollbar-width: none plus het WebKit-equivalent om schuifbalken te verbergen en de schuiffunctie te behouden.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Scrollbar-styling met ::-webkit-scrollbar” gratis?
Ja — de volledige tekst van “Scrollbar-styling met ::-webkit-scrollbar” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Scrollbar-styling met ::-webkit-scrollbar”?
Pas het uiterlijk van scrollbars aan met WebKit-pseudo-elementen en de eigenschap scrollbar-color. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Scrollbar-styling met ::-webkit-scrollbar”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type en scroll-snap-align
- Scrollbar-styling met ::-webkit-scrollbar