Tilpasse rullefelt med ::-webkit-scrollbar
Tilpass utseendet til rullefelt ved hjelp av WebKit-pseudo-elementer og scrollbar-color-egenskapen.
Tilpasse rullefelt med ::-webkit-scrollbar er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Oversikt over styling av rullefelt
Nettlesere viser standardiserte rullefelt som varierer mellom operativsystemer. CSS lar Dem tilpasse utseendet til rullefelt ved hjelp av ikke-standardiserte WebKit-pseudoelementer og moderne standardegenskaper.
::-webkit-scrollbar
Rotelementet for hele rullefeltet. Angi bredden (vertikalt) og høyden (horisontalt):
<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
Sporet er bakgrunnskanalen som håndtaket beveger seg langs:
<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
Håndtaket er den rullbare indikatoren som kan dras:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Fullstendig tilpasset rullefelt
En fullstendig implementering av et tilpasset rullefelt:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Moderne standard: scrollbar-color
scrollbar-color er den standardiserte egenskapen som støttes av Firefox. Den angir fargene på håndtaket og sporet i én deklarasjon:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Moderne standard: scrollbar-width
scrollbar-width styrer størrelsen på rullefeltet med nøkkelordverdier:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Styling av rullefelt på tvers av nettlesere
Bruk begge fremgangsmåtene for full støtte på tvers av nettlesere:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Skjul rullefelt, men behold rulling
Gjør et element rullbart, men skjul rullefeltet visuelt:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Rullefelt i mørk modus
Bruk CSS-egenskapen color-scheme for å få mørke rullefelt som ser opprinnelige ut for operativsystemet, uten tilpasset styling:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>Påminnelse om tilgjengelighet
Ikke gjør rullefelt så små eller usynlige at det blir vanskelig å oppdage hvordan siden kan rulles. Skjulte rullefelt er akseptable i berøringsfokuserte utforminger, men kan være forvirrende på stasjonære datamaskiner.
Hurtigsjekk
Hvilken standardisert CSS-egenskap angir fargene på rullefeltet og støttes av Firefox?
Oppsummering
Tilpass rullefelt med ::-webkit-scrollbar-pseudoelementer (WebKit) og standardegenskapene scrollbar-color/scrollbar-width (Firefox og moderne nettlesere). Bruk begge for full støtte på tvers av nettlesere. Bruk scrollbar-width: none sammen med WebKit-ekvivalenten for å skjule rullefelt uten å deaktivere rullefunksjonaliteten.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Tilpasse rullefelt med ::-webkit-scrollbar» gratis?
Ja – hele teksten i «Tilpasse rullefelt med ::-webkit-scrollbar» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Tilpasse rullefelt med ::-webkit-scrollbar»?
Tilpass utseendet til rullefelt ved hjelp av WebKit-pseudo-elementer og scrollbar-color-egenskapen. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Tilpasse rullefelt med ::-webkit-scrollbar»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type og scroll-snap-align
- Tilpasse rullefelt med ::-webkit-scrollbar