Rullefelt - CSS-triks | CSS-almanakk 2025

En kort historie om styling av rullefelt:

Det pleide å være en ting bare Internet Explorer kunne gjøre (gamle versjoner) med ting som -ms-scrollbar-base-color. Disse eksisterer ikke lenger.
Da kom WebKit-baserte nettlesermotorer ombord med ting som ::-webkit-scrollbar. Det er det denne Alamanac-oppføringen dekker for det meste, siden den fungerer over Safari / Chrome-landskapet i dag.
Standarder har endelig blitt involvert, og disse stilingsalternativene dekkes av ikke-prefiksede egenskaper som rullefeltfarge og rullefeltbredde.

Styling-rullefelt for Safari / Chrome-verdenen er eksponert bak -webkitleverandørprefikset.

Denne almanakkoppføringen er en oversikt, for en mer fullstendig oversikt over arbeidet med tilpassede rullefelt, vennligst les denne CSS-Tricks-artikkelen.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

Den -webkit-scrollbarfamilie av egenskaper består av syv forskjellige pseudo-elementer som til sammen utgjør en hel rullegrensesnittelement:

::-webkit-scrollbaradresserer bakgrunnen til selve baren. Det dekkes vanligvis av de andre elementene
::-webkit-scrollbar-button adresserer retningsknappene på rullefeltet
::-webkit-scrollbar-track adresserer det tomme rommet "under" fremdriftslinjen
::-webkit-scrollbar-track-piece er det øverste laget av fremdriftslinjen som ikke dekkes av det trekkbare rulleelementet (tommel)
::-webkit-scrollbar-thumb adresserer det drabare rulleelementet som endres, avhengig av størrelsen på det rullebare elementet
::-webkit-scrollbar-corner adresserer det (vanligvis) nederste hjørnet av det rullbare elementet, der to rullefelt kan møtes
::-webkit-resizeradresserer det trekkbare størrelseshåndtaket som vises over scrollbar-cornernederst i hjørnet av noen elementer

I tillegg til disse pseudoelementene er det også elleve pseudovelgerklasser som ikke kreves, men som gir designere muligheten til å style forskjellige tilstander og interaksjoner i rullefeltets brukergrensesnitt. En fullstendig oversikt over disse pseudovelgerne, og et detaljert eksempel, finner du i denne CSS-Tricks-artikkelen.

Sjekk ut denne pennen!

Interessepunkt

Hvis det ikke er noen kvalifiserende velger før de forskjellige pseudoelementene, vil stilene gjelde for alle rullefelt som kan vises på siden.
Å stille inn -webkit-scrollbarstiler er en god måte å tvinge websiden din til å vise horisontale eller vertikale rullefelt på versjoner av Mac OS nyere enn Lion, der rullefelt vanligvis er skjult.
Siden denne eiendommen ligger bak et -webkitforhandlerprefiks, har flere jQuery-plugins blitt skrevet til “polyfill” eller utvidet denne funksjonaliteten til andre nettlesere. En slik plugin er jScrollPane.