In dit artikel duiken we in de wereld van schuifbalken. Ik weet het, het klinkt niet al te glamoureus, maar geloof me, een goed ontworpen pagina gaat hand in hand met een bijpassende schuifbalk. De ouderwetse chromen scrollbar past er gewoon niet zo goed in.
We zullen de details van een schuifbalk onderzoeken en vervolgens enkele coole voorbeelden bekijken.
Onderdelen van een schuifbalk
Dit is eigenlijk meer een opfriscursus. Er zijn een een heleboel berichten hier op CSS-Tricks die diep ingaan op de details als het gaat om aangepaste schuifbalkstijlen in CSS.
Om een schuifbalk op te maken, moet u bekend zijn met de anatomie van een schuifbalk. Kijk eens naar deze illustratie:
De twee belangrijkste componenten om in gedachten te houden zijn:
- De spoor is de achtergrond onder de balk.
- De duim is het deel waarop de gebruiker klikt en rondsleept.
We kunnen de eigenschappen van de volledige schuifbalk wijzigen met behulp van de vendor-prefix::-webkit-scrollbar kiezer. We kunnen de schuifbalk een vaste breedte, achtergrondkleur, afgeronde hoeken geven... heel veel! Als we de hoofdschuifbalk van een pagina aanpassen, kunnen we gebruik maken van ::-webkit-scrollbar direct op het HTML-element:
html::-webkit-scrollbar {
/* Style away! */
}Als we een schuifvak aanpassen, is dat het resultaat van: overflow: scroll, dan kunnen we gebruiken ::-webkit-scrollbar op dat element in plaats daarvan:
.element::-webkit-scrollbar {
/* Style away! */
}Hier is een snel voorbeeld dat de schuifbalk van het HTML-element opmaakt zodat deze breed is met een rode achtergrond:
Wat als we alleen de duim of het spoor van de schuifbalk willen veranderen? Je raadt het al - we hebben speciale prefix pseudo-elementen voor die twee: ::-webkit-scrollbar-thumb en ::-webkit-scrollbar-track, respectievelijk. Hier is een idee van wat er mogelijk is als we al deze dingen samenvoegen:
Genoeg gepoetst! Ik wil je drie graden van aangepaste scrollbar-styling laten zien, en dan een grote oude showcase openen van voorbeelden die van over het web zijn gehaald voor inspiratie.
Eenvoudige en stijlvolle schuifbalken
Een aangepaste schuifbalk kan nog steeds minimaal zijn. Ik heb een groep voorbeelden samengesteld die het uiterlijk subtiel veranderen, of het nu gaat om een lichte kleurverandering op de duim of track, of een lichte styling op de achtergrond.
Zoals je kunt zien, hoeven we niet gek te worden als het gaat om de stijl van de schuifbalk. Soms is een subtiele verandering voldoende om de algehele gebruikerservaring te verbeteren met een schuifbalk die past bij het algemene thema.
Coole opvallende schuifbalken
Maar laten we het toegeven: het is leuk om een beetje overboord te gaan en wat creativiteit aan de dag te leggen. Hier zijn enkele rare en unieke schuifbalken die in sommige gevallen misschien "te veel" zijn, maar ze zijn zeker in het oog springend.
Nog een…
Wat dacht je van de schuifbalk voor een rondje in een trein voor de duim en sporen voor de, nou ja, de baan!
