Scrollbars är en av de UI-komponenter som finns på nästan alla sidor på internet, men vi (utvecklare) har liten eller ingen kontroll över den. Vissa webbläsare ger oss möjlighet att anpassa deras utseende men för de flesta webbläsare inklusive Firefox är det bara inte möjligt.
Det har gjorts några uppdateringar och standardisering av styling av rullningslister. Se The Current State of Styling Scrollbars för det senaste, som du kan porta till en mixin.
Ändå gör Chrome och Internet Explorer (ja) det möjligt för oss att definiera anpassade stilar för rullningslister. Men syntaxen är fruktansvärt komplex och naturligtvis definitivt inte standard. Välkommen till den egna världen. Det är därför du kanske vill ha en liten mixin för att enkelt anpassa dina rullningslister. Rätt?
@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; ) )Användande:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Exempel
Se mixen Pen Sass för rullningsstyling av Hugo Giraudel (@HugoGiraudel) på CodePen.
Går längre
I båda webbläsarna finns det många fler alternativ än bara färg och storlek. Men de förbises ofta så jag tycker inte att det är värt att överbelasta mixin med dessa alternativ. Bygg gärna ett mer avancerat mixin med extra alternativ.
Ytterligare avläsningar:
- Inset & Anpassad WebKit Scrollbar
- Anpassade rullningsfält i Webkit
- Anpassade rullningslister för IE och Chrome med CSS