Drsni trakovi so ena od tistih komponent uporabniškega vmesnika, ki so prisotne na skoraj vseh straneh interneta, vendar mi (razvijalci) nad njim skorajda ne nadzorujemo. Nekateri brskalniki nam omogočajo, da prilagodimo njihov videz, vendar za večino brskalnikov, vključno s Firefoxom, to preprosto ni mogoče.
Obstaja nekaj posodobitev in standardizacija stilskih drsnikov. Glejte Trenutno stanje drsnih trakov za trenutno oblikovanje, kjer najdete najnovejše, ki jih lahko prenesete na mixin.
Kljub temu nam Chrome in Internet Explorer (da) omogočata, da določimo sloge po meri za drsne trakove. Vendar je sintaksa strašno zapletena in seveda vsekakor ni standardna. Dobrodošli v lastniškem svetu. Zato boste morda želeli imeti malo mešanice za enostavno prilagajanje drsnikov. Prav?
@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; ) )Uporaba:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Primer
Oglejte si Pen Sass mixin za drsni trak, ki ga je napisal Hugo Giraudel (@HugoGiraudel) na CodePen.
Gremo naprej
V obeh brskalnikih je veliko več možnosti kot le barva in velikost. Vendar so pogosto spregledani, zato se mi ne zdi vredno pretiravati mešanice s temi možnostmi. Vas prosimo, da ustvarite bolj napreden mixin z dodatnimi možnostmi.
Nadaljnja branja:
- Vstavite in prilagodite drsnik WebKit
- Drsni trakovi po meri v Webkitu
- Drsni trakovi po meri za IE in Chrome z uporabo CSS
