In questo articolo ci tufferemo nel mondo delle barre di scorrimento. Lo so, non sembra troppo affascinante, ma credetemi, una pagina ben progettata va di pari passo con una barra di scorrimento corrispondente. La barra di scorrimento cromata vecchio stile non si adatta così tanto.
Esamineremo i dettagli grintosi di una barra di scorrimento e quindi esamineremo alcuni esempi interessanti.
Componenti di una barra di scorrimento
Questo è più un aggiornamento, davvero. Ci sono un mucchio di post proprio qui su CSS-Tricks che approfondiscono i dettagli quando si tratta di stili personalizzati della barra di scorrimento nei CSS.
Per definire lo stile di una barra di scorrimento è necessario avere familiarità con l'anatomia di una barra di scorrimento. Dai un'occhiata a questa illustrazione:
I due componenti principali da tenere a mente qui sono:
- I pista è lo sfondo sotto la barra.
- I pollice è la parte su cui l'utente fa clic e trascina.
Possiamo modificare le proprietà della barra di scorrimento completa utilizzando il prefisso del fornitore::-webkit-scrollbar selettore. Possiamo dare alla barra di scorrimento una larghezza fissa, un colore di sfondo, angoli arrotondati... un sacco di cose! Se stiamo personalizzando la barra di scorrimento principale di una pagina, allora possiamo usare ::-webkit-scrollbar direttamente sull'elemento HTML:
html::-webkit-scrollbar {
/* Style away! */
}Se stiamo personalizzando una casella di scorrimento, questo è il risultato di overflow: scroll, allora possiamo usare ::-webkit-scrollbar su quell'elemento invece:
.element::-webkit-scrollbar {
/* Style away! */
}Ecco un rapido esempio che stilizza la barra di scorrimento dell'elemento HTML in modo che sia larga con uno sfondo rosso:
Cosa succede se vogliamo solo cambiare il pollice o la traccia della barra di scorrimento? Hai indovinato: abbiamo speciali pseudo-elementi prefissi per quei due: ::-webkit-scrollbar-thumb ed ::-webkit-scrollbar-track, rispettivamente. Ecco un'idea di cosa è possibile quando mettiamo insieme tutte queste cose:
Basta rispolverare! Voglio mostrarti tre gradi di stile personalizzato della barra di scorrimento, quindi aprire una grande vecchia vetrina di esempi estratti da tutto il Web per l'ispirazione.
Barre di scorrimento semplici ed eleganti
Una barra di scorrimento personalizzata può comunque essere minima. Ho messo insieme un gruppo di esempi che cambiano sottilmente l'aspetto, sia con un leggero cambiamento di colore sul pollice o sulla traccia, sia con uno stile leggero sullo sfondo.
Come puoi vedere, non dobbiamo impazzire quando si tratta di stilizzare la barra di scorrimento. A volte basta una leggera modifica per migliorare l'esperienza utente complessiva con una barra di scorrimento che corrisponda al tema generale.
Fantastiche barre di scorrimento accattivanti
Ma ammettiamolo: è divertente esagerare ed esercitare un po' di creatività. Ecco alcune barre di scorrimento strane e uniche che potrebbero essere "troppe" in alcuni casi, ma sicuramente attirano l'attenzione.
Ancora uno ...
Che ne dici di prendere la barra di scorrimento per un giro in treno per il pollice e i binari per, beh, il binario!
