I denne artikel vil vi dykke ned i scrollbarernes verden. Jeg ved godt, det lyder ikke for glamourøst, men tro mig, en veldesignet side går hånd i hånd med en matchende rullebjælke. Den gammeldags scrollbar i krom passer bare ikke så meget ind.
Vi vil se nærmere på de små, grove detaljer i en rullebjælke og derefter se på nogle seje eksempler.
Komponenter af en rullepanel
Dette er egentlig mere en genopfriskning. Der er en en masse indlæg lige her på CSS-Tricks der går i dyb detalje, når det kommer til tilpasset rullebjælkestil i CSS.
For at style en rullebjælke skal du være bekendt med anatomien af en rullebjælke. Tag et kig på denne illustration:
De to hovedkomponenter at huske på her er:
- spor er baggrunden under bjælken.
- tommelfinger er den del, som brugeren klikker og trækker rundt på.
Vi kan ændre egenskaberne for den komplette rullebjælke ved at bruge leverandørpræfikset::-webkit-scrollbar vælger. Vi kan give rullebjælken en fast bredde, baggrundsfarve, afrundede hjørner... en masse ting! Hvis vi tilpasser hovedrullelinjen på en side, så kan vi bruge ::-webkit-scrollbar direkte på HTML-elementet:
html::-webkit-scrollbar {
/* Style away! */
}Hvis vi tilpasser en rulleboks, er det resultatet af overflow: scroll, så kan vi bruge ::-webkit-scrollbar på det element i stedet:
.element::-webkit-scrollbar {
/* Style away! */
}Her er et hurtigt eksempel, der stiler HTML-elementets rullepanel, så den er bred med en rød baggrund:
Hvad hvis vi kun vil ændre rullebjælkens tommelfinger eller spor? Du gættede det - vi har specielle pseudoelementer med præfiks til disse to: ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track, henholdsvis. Her er en idé om, hvad der er muligt, når vi sætter alle disse ting sammen:
Nok at børste op! Jeg vil gerne vise dig tre grader af tilpasset scrollbar-stil, og derefter åbne op for et stort gammelt udstillingsvindue med eksempler hentet fra hele nettet til inspiration.
Enkle og klassiske rullepaneler
En tilpasset rullepanel kan stadig være minimal. Jeg sammensatte en gruppe eksempler, der subtilt ændrer udseendet, hvad enten det er med en lille farveændring på tommelfingeren eller sporet, eller noget let styling til baggrunden.
Som du kan se, behøver vi ikke at gå amok, når det kommer til scrollbar-styling. Nogle gange er en subtil ændring alt, der skal til for at forbedre den overordnede brugeroplevelse med en rullepanel, der matcher det overordnede tema.
Seje iøjnefaldende rullebjælker
Men lad os indrømme det: det er sjovt at gå lidt overbord og udøve noget kreativitet. Her er nogle mærkelige og unikke rullebjælker, der måske er "for meget" i nogle tilfælde, men de er helt sikkert iøjnefaldende.
En til…
Hvad med at vi tager rullebjælken en tur i et tog for tommelfingeren og sporene til, ja, banen!
