Kerimisribad on üks neist kasutajaliidese komponentidest, mida leidub peaaegu igal Interneti-lehel, kuid meil (arendajatel) on selle üle vähe või üldse mitte kontrolli. Mõni brauser annab meile võimaluse oma välimust kohandada, kuid enamiku brauserite, sealhulgas Firefoxi jaoks pole see lihtsalt võimalik.
Kerimisribade kujundamisel on tehtud mõned värskendused ja standardimine. Vaadake viimati kerimisribade praegust olekut, mille saate portida mixini.
Sellegipoolest võimaldavad Chrome ja Internet Explorer (jah) meil kerimisribade jaoks kohandatud stiile määratleda. Süntaks on aga jube keeruline ja muidugi kindlasti mitte standardne. Tere tulemast varalises maailmas. Sellepärast võiksite kerimisribade hõlpsaks kohandamiseks saada väikese mixini. Eks?
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )Kasutamine:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Näide
Hugo Giraudeli (@HugoGiraudel) kerimisriba kujundamise kohta leiate CodePeni saidilt Pen Sass.
Edasi minnes
Mõlemas brauseris on palju rohkem võimalusi kui ainult värv ja suurus. Kuid need jäetakse sageli tähelepanuta, nii et ma ei arva, et nende valikutega segu oleks ülekoormatud. Ehitage julgelt lisavõimalustega täiustatud segu.
Edasised lugemised:
- Sisestatud ja kohandatud WebKiti kerimisriba
- Kohandatud kerimisribad Webkitis
- CSS-i kasutavate IE ja Chrome'i kohandatud kerimisribad
