I den här artikeln kommer vi att dyka in i en värld av rullningslister. Jag vet, det låter inte så glamoröst, men tro mig, en väldesignad sida går hand i hand med en matchande rullningslist. Den gammaldags rullningslisten i krom passar helt enkelt inte in lika mycket.
Vi kommer att undersöka de snygga detaljerna i en rullningslist och sedan titta på några coola exempel.
Komponenter i en rullningslist
Det här är mer av en uppfräschning, egentligen. Det är en massa inlägg här på CSS-Tricks som går in på djupet när det kommer till anpassad rullningsliststil i CSS.
För att utforma en rullningslist måste du vara bekant med anatomin hos en rullningslist. Ta en titt på den här illustrationen:
De två huvudkomponenterna att tänka på här är:
- Smakämnen spår är bakgrunden under stapeln.
- Smakämnen tumme är den del som användaren klickar och drar runt.
Vi kan ändra egenskaperna för hela rullningslisten med leverantörsprefixet::-webkit-scrollbar väljare. Vi kan ge rullningslisten en fast bredd, bakgrundsfärg, rundade hörn... massor av saker! Om vi anpassar huvudrullningslisten på en sida kan vi använda ::-webkit-scrollbar direkt på HTML-elementet:
html::-webkit-scrollbar {
/* Style away! */
}Om vi anpassar en rullningsruta som är resultatet av overflow: scroll, då kan vi använda ::-webkit-scrollbar på det elementet istället:
.element::-webkit-scrollbar {
/* Style away! */
}Här är ett snabbt exempel som formaterar HTML-elementets rullningslist så att den är bred med en röd bakgrund:
Vad händer om vi bara vill ändra rullningslistens tumme eller spår? Du gissade rätt - vi har speciella prefixerade pseudoelement för dessa två: ::-webkit-scrollbar-thumb och ::-webkit-scrollbar-track, respektive. Här är en uppfattning om vad som är möjligt när vi sätter ihop alla dessa saker:
Nog med att borsta upp! Jag vill visa dig tre grader av anpassad rullningsliststil, och sedan öppna upp en stor gammal utställning med exempel hämtade från hela webben för inspiration.
Enkla och stilrena rullningslister
En anpassad rullningslist kan fortfarande vara minimal. Jag satte ihop en grupp exempel som på ett subtilt sätt förändrar utseendet, oavsett om det är en liten färgförändring på tummen eller spåret, eller lite lätt styling i bakgrunden.
Som du kan se behöver vi inte gå galna när det kommer till rullningslistens styling. Ibland är en subtil förändring allt som krävs för att förbättra den övergripande användarupplevelsen med en rullningslist som matchar det övergripande temat.
Coola iögonfallande rullningslister
Men låt oss erkänna det: det är kul att gå lite överbord och utöva lite kreativitet. Här är några konstiga och unika rullningslister som kan vara "för mycket" i vissa fall, men de är verkligen iögonfallande.
En till…
Vad sägs om att vi tar rullningslisten en sväng i ett tåg för tummen och spår för, ja, banan!
