Posuvníky jsou jednou z těch komponent uživatelského rozhraní, které jsou přítomny téměř na každé stránce internetu, ale my (vývojáři) nad nimi nemáme téměř žádnou kontrolu. Některé prohlížeče nám umožňují přizpůsobit jejich vzhled, ale pro většinu prohlížečů včetně Firefoxu to prostě není možné.
Došlo k několika aktualizacím a standardizaci stylových posuvníků. Podívejte se na nejnovější stav posuvných pruhů pro styling, které můžete přenést do mixinu.
Chrome a Internet Explorer (ano) nám přesto umožňují definovat vlastní styly pro posuvníky. Syntaxe je však strašně složitá a samozřejmě rozhodně není standardní. Vítejte v proprietárním světě. To je důvod, proč možná budete chtít mít malý mix, který vám umožní snadno přizpůsobit posuvníky. Že jo?
@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žívání:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Příklad
Podívejte se na mix Pen Sass, kde najdete styling posuvného pruhu od Huga Giraudela (@HugoGiraudel) na CodePen.
Jít dále
V obou prohlížečích existuje mnohem více možností než jen barva a velikost. Často jsou však přehlíženi, takže si nemyslím, že by stálo za to přeplnit mixin těmito možnostmi. Neváhejte vytvořit pokročilejší mixin s dalšími možnostmi.
Další čtení:
- Vložený a přizpůsobený posuvník WebKit
- Vlastní posuvníky ve Webkitu
- Vlastní posuvníky pro IE a Chrome pomocí CSS