Kerimisriba - CSS-trikid | CSS-i almanahh 2025

Kerimisribade lühike ajalugu:

Varem oli asi, mida ainult Internet Explorer sai teha (iidsed versioonid) selliste asjadega -ms-scrollbar-base-color. Neid pole enam olemas.
Siis said WebKit-põhised brauserimootorid pardale selliseid asju nagu ::-webkit-scrollbar. Seda see Alamanaci kirje enamasti hõlmab, kuna see töötab tänapäeval kogu Safari / Chrome'i maastikul.
Standardid on lõpuks kaasa löönud ja neid stiilivalikuid katavad eesliitmata omadused, näiteks kerimisriba värv ja kerimisriba laius.

Safari / Chrome'i maailma stiiliribad on avatud -webkitmüüja eesliite taga .

See almanahhikirje on ülevaade. Kohandatud kerimisribadega töötamise täieliku jaotuse saamiseks lugege seda CSS-trikkide artiklit.

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; )

-webkit-scrollbarPerekonda omadused koosneb seitsmest erinevast pseudo-elemendid, mis üheskoos sisaldavad täielikku kerimisriba UI element:

::-webkit-scrollbarkäsitleb riba enda tausta. Tavaliselt on see kaetud teiste elementidega
::-webkit-scrollbar-button adresseerib kerimisriba suunanuppe
::-webkit-scrollbar-track tegeleb edenemisriba allpool asuva tühja kohaga
::-webkit-scrollbar-track-piece on edenemisriba ülemine kiht, mida lohistatav kerimiselement (pöidla) ei kata
::-webkit-scrollbar-thumb aadress lohistatavale keritavale elemendile, mille suurust muudetakse sõltuvalt keritava elemendi suurusest
::-webkit-scrollbar-corner aadress keritava elemendi (tavaliselt) alumisse nurka, kus kaks kerimisriba võivad kokku puutuda
::-webkit-resizeraadress lohistatava suuruse muutmise käepidemele, mis kuvatakse scrollbar-cornermõne elemendi alumises nurgas

Lisaks nendele pseudoelementidele on ka üksteist pseudovalija klassi, mida pole vaja, kuid mis annavad disaineritele voli kerimisriba kasutajaliidese erinevate olekute ja vastastikmõjude kujundamiseks. Nende pseudovalijate täielik jaotus ja üksikasjalik näide leiate sellest CSS-trikkide artiklist.

Vaadake seda pliiatsit!

Huvipunktid

Kui erinevatele pseudoelementidele ei ole eelnevat kvalifitseerivat valijat, kehtivad stiilid kõikidele lehel ilmuda võivatele ribadele.
-webkit-scrollbarStiilide määramine on hea viis sundida oma veebisaiti näitama horisontaalseid või vertikaalseid kerimisribasid Mac OS-i versioonides, mis on uuemad kui Lion, kus tavaliselt on ribad vaikimisi peidetud.
Kuna see atribuut on -webkitmüüja eesliite taga , on mitmed jQuery pistikprogrammid kirjutatud „polyfill“ või laiendavad seda funktsiooni teistele brauseritele. Üks selline pistikprogramm on jScrollPane.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.