Rullepanel - CSS-tricks | CSS Almanak 2025

En kort historie om styling af rullebjælker:

Det plejede at være en ting, som kun Internet Explorer kunne gøre (gamle versioner) med ting som -ms-scrollbar-base-color. Disse findes ikke længere.
Derefter kom WebKit-baserede browsermotorer om bord med ting som ::-webkit-scrollbar. Det er, hvad denne Alamanac-post for det meste dækker, da den fungerer på tværs af Safari / Chrome-landskabet i dag.
Standarder er endelig blevet involveret, og disse stylingmuligheder er dækket af ikke-præfikserede egenskaber som rullepanelfarve og rullebjælkebredde.

Styling af rullebjælker til Safari / Chrome-verdenen er eksponeret bag -webkitsælgerpræfikset.

Denne almanakpost er en oversigt, hvis du vil have en mere komplet oversigt over arbejdet med brugerdefinerede rullepaneler, skal du læse denne CSS-Tricks-artikel.

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 af egenskaber består af syv forskellige pseudo-elementer, der tilsammen udgør en fuld rullebjælke UI element:

::-webkit-scrollbaradresserer baggrunden for selve bjælken. Det er normalt dækket af de andre elementer
::-webkit-scrollbar-button adresserer retningsknapperne på rullepanelet
::-webkit-scrollbar-track adresserer det tomme rum "under" statuslinjen
::-webkit-scrollbar-track-piece er det øverste lag i statuslinjen, der ikke er dækket af det trækbare rulleelement (tommelfinger)
::-webkit-scrollbar-thumb adresserer det trækbare rulleelement, der ændrer størrelse afhængigt af størrelsen på det rullebare element
::-webkit-scrollbar-corner adresserer det (normalt) nederste hjørne af det rullebare element, hvor to rullepaneler mødes
::-webkit-resizeradresserer det trækbare størrelseshåndtag, der vises over scrollbar-cornerdet nederste hjørne af nogle elementer

Ud over disse pseudo-elementer er der også elleve pseudo-vælgerklasser, der ikke er påkrævet, men som giver designere beføjelse til at style forskellige tilstande og interaktioner i rullepanel-UI. En fuldstændig opdeling af disse pseudovælgere og et detaljeret eksempel findes i denne CSS-Tricks-artikel.

Tjek denne pen!

Interessepunkter

Hvis der ikke er nogen kvalificerende vælger, der går forud for de forskellige pseudoelementer, gælder typografierne for enhver rullebjælke, der måtte vises på siden.
Indstilling af -webkit-scrollbarstilarter er en god måde at tvinge din webside til at vise vandrette eller lodrette rullepaneler på versioner af Mac OS nyere end Lion, hvor rullebjælker normalt er skjult som standard.
Da denne egenskab ligger bag et -webkitleverandørpræfiks, er flere jQuery-plugins blevet skrevet til "polyfill" eller udvider denne funktion til andre browsere. Et sådant plugin er jScrollPane.