Le barre di scorrimento sono uno di quei componenti dell'interfaccia utente presenti in quasi tutte le pagine di Internet, ma noi (sviluppatori) abbiamo poco o nessun controllo su di esso. Alcuni browser ci danno la possibilità di personalizzare il loro aspetto ma per la maggior parte dei browser, incluso Firefox, semplicemente non è possibile.
Sono stati apportati alcuni aggiornamenti e standardizzazioni allo stile delle barre di scorrimento. Vedi The Current State of Styling Scrollbars per l'ultimo, che potresti portare a un mixin.
Tuttavia, Chrome e Internet Explorer (sì) ci consentono di definire stili personalizzati per le barre di scorrimento. Tuttavia la sintassi è orribilmente complessa e, ovviamente, decisamente non standard. Benvenuto nel mondo dei proprietari. Questo è il motivo per cui potresti voler avere un piccolo mixin per personalizzare facilmente le tue barre di scorrimento. Giusto?
@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; ) )Utilizzo:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Esempio
Guarda il mixin di Pen Sass per lo stile della barra di scorrimento di Hugo Giraudel (@HugoGiraudel) su CodePen.
Andare avanti
Su entrambi i browser, ci sono molte più opzioni oltre al colore e alle dimensioni. Tuttavia, sono spesso trascurati, quindi non penso valga la pena di sovraffollare il mixin con queste opzioni. Sentiti libero di creare un mixin più avanzato con opzioni extra.
Ulteriori letture:
- Barra di scorrimento WebKit integrata e personalizzata
- Barre di scorrimento personalizzate in Webkit
- Barre di scorrimento personalizzate per IE e Chrome utilizzando CSS