Klassiske og kule tilpassede CSS-rullefelt: et utstillingsvindu

Publisert av Platon

Følgere: 0

I denne artikkelen vil vi dykke inn i rullefeltenes verden. Jeg vet, det høres ikke for glamorøst ut, men tro meg, en godt designet side går hånd i hånd med en matchende rullefelt. Den gammeldagse rullelisten i krom passer bare ikke så mye inn.

Vi skal se nærmere på de grove detaljene til en rullefelt og deretter se på noen kule eksempler.

Komponenter i en rullefelt

Dette er mer en oppfriskning, egentlig. Det finnes en haug med innlegg her på CSS-Tricks som går i dype detaljer når det kommer til tilpasset rullefeltstil i CSS.

For å style et rullefelt må du være kjent med anatomien til en rullefelt. Ta en titt på denne illustrasjonen:

Klassiske og kule tilpassede CSS-rullefelt: Et utstillingsvindu

De to hovedkomponentene du bør huske på her er:

De spor er bakgrunnen under stolpen.
De tommel er delen som brukeren klikker og drar rundt.

Vi kan endre egenskapene til hele rullefeltet ved å bruke leverandørprefikset::-webkit-scrollbar velger. Vi kan gi rullefeltet en fast bredde, bakgrunnsfarge, avrundede hjørner ... mange ting! Hvis vi tilpasser hovedrullelinjen på en side, kan vi bruke ::-webkit-scrollbar direkte på HTML-elementet:

html::-webkit-scrollbar {
  /* Style away! */
}

Hvis vi tilpasser en rulleboks som er resultatet av overflow: scroll, så kan vi bruke ::-webkit-scrollbar på det elementet i stedet:

.element::-webkit-scrollbar {
  /* Style away! */
}

Her er et raskt eksempel som stiler HTML-elementets rullefelt slik at den er bred med rød bakgrunn:

Hva om vi bare ønsker å endre rullefeltets tommel eller spor? Du gjettet det - vi har spesielle pseudoelementer med prefiks for disse to: ::-webkit-scrollbar-thumb og ::-webkit-scrollbar-track, henholdsvis. Her er en idé om hva som er mulig når vi setter alle disse tingene sammen:

Nok pussing! Jeg vil vise deg tre grader av tilpasset rullefeltstil, og deretter åpne opp et stort gammelt utstillingsvindu med eksempler hentet fra hele nettet for inspirasjon.

Enkle og stilige rullefelt

Et tilpasset rullefelt kan fortsatt være minimalt. Jeg satte sammen en gruppe eksempler som subtilt endrer utseendet, enten med en liten fargeendring på tommelen eller sporet, eller litt lett styling til bakgrunnen.

Som du kan se, trenger vi ikke å gå gale når det kommer til rullefeltstyling. Noen ganger er en subtil endring alt som skal til for å forbedre den generelle brukeropplevelsen med en rullefelt som samsvarer med det generelle temaet.

Kule iøynefallende rullefelt

Men la oss innrømme det: det er gøy å gå litt over bord og utøve litt kreativitet. Her er noen rare og unike rullefelt som kan være "for mye" i noen tilfeller, men de er absolutt iøynefallende.