Rullningsfält - CSS-tricks | CSS Almanack 2025

En kort historia om styling av rullningslister:

Det brukade vara en sak som bara Internet Explorer kunde göra (gamla versioner) med saker som -ms-scrollbar-base-color. Dessa finns inte längre.
Sedan kom WebKit-baserade webbläsarmotorer ombord med saker som ::-webkit-scrollbar. Det är vad denna Alamanac-post täcker mest, eftersom den fungerar över Safari / Chrome-landskapet idag.
Standarder har äntligen blivit involverade, och dessa stylingalternativ täcks av ej prefixade egenskaper som rullningsfärg och rullningsbredd.

Styling rullar för Safari / Chrome-världen är exponerad bakom -webkitleverantörsprefixet.

Denna almanackpost är en översikt, för en mer fullständig uppdelning av arbetet med anpassade rullningslister, läs den här CSS-Tricks-artikeln.

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-scrollbarfamilj av egenskaper består av sju olika pseudo-element som, tillsammans, utgör ett fullständigt rullningsgränssnittselement:

::-webkit-scrollbaradresserar bakgrunden till själva stapeln. Det täcks vanligtvis av de andra elementen
::-webkit-scrollbar-button adresserar riktningsknapparna på rullningsfältet
::-webkit-scrollbar-track adresserar det tomma utrymmet "under" förloppsindikatorn
::-webkit-scrollbar-track-piece är det översta lagret i framstegsfältet som inte täcks av det dragbara rullningselementet (tumme)
::-webkit-scrollbar-thumb adresserar det dragbara rullningselementet som ändrar storlek beroende på storleken på det rullbara elementet
::-webkit-scrollbar-corner adresserar det (vanligtvis) nedre hörnet av det rullningsbara elementet, där två rullningsfält kan mötas
::-webkit-resizeradresserar det dragbara storlekshandtaget som visas ovanför scrollbar-cornerdet nedre hörnet av vissa element

Förutom dessa pseudoelement finns det också elva pseudoväljarklasser som inte krävs men ger designers möjlighet att utforma olika tillstånd och interaktioner i rullningsgränssnittet. En fullständig uppdelning av dessa pseudoväljare och ett detaljerat exempel finns i denna CSS-Tricks-artikel.

Kolla in den här pennan!

Intressanta platser

Om det inte finns någon kvalificeringsväljare som föregår de olika pseudoelementen, kommer stilarna att tillämpas på alla rullningsfält som kan visas på sidan.
Att ställa in -webkit-scrollbarstilar är ett bra sätt att tvinga din webbsida att visa horisontella eller vertikala rullningslister på versioner av Mac OS nyare än Lion, där rullningslister vanligtvis är dolda som standard.
Eftersom den här egenskapen ligger bakom ett -webkitleverantörsprefix har flera jQuery-plugins skrivits till "polyfill" eller utökat denna funktion till andra webbläsare. Ett sådant plugin är jScrollPane.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.