Posuvníky sú jednou z tých súčastí používateľského rozhrania, ktoré sú prítomné takmer na každej stránke internetu. Napriek tomu nad nimi (vývojári) nemáme takmer nijakú kontrolu. Niektoré prehľadávače nám umožňujú prispôsobiť ich vzhľad, ale pre väčšinu prehľadávačov vrátane Firefoxu to jednoducho nie je možné.
Došlo k niekoľkým aktualizáciám a štandardizácii štýlových posúvačov. Najnovšie informácie o posúvačoch Aktuálny stav štýlu nájdete v zozname, ktorý je možné preniesť do kombinácie.
Prehliadače Chrome a Internet Explorer (áno) nám napriek tomu umožňujú definovať vlastné štýly posúvačov. Syntax je však strašne zložitá a samozrejme určite nie štandardná. Vitajte v chránenom svete. Preto možno budete chcieť mať malý mix, ktorý vám umožní ľahko prispôsobiť posuvné lišty. Správny?
@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; ) )Použitie:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Príklad
Pozrite si mix pera Sass a pozrite sa na styling posuvného pruhu od Huga Giraudela (@HugoGiraudel) na CodePen.
Ďalej
V obidvoch prehľadávačoch existuje oveľa viac možností ako iba farba a veľkosť. Často sú však prehliadané, takže si nemyslím, že by stálo za to preplniť mixin týmito možnosťami. Neváhajte vytvoriť pokročilejšiu kombináciu s ďalšími možnosťami.
Ďalšie čítania:
- Vložený a prispôsobený posúvač WebKit
- Vlastné posúvače vo Webkite
- Vlastné posuvníky pre IE a Chrome pomocou CSS