Come creare scrollbar css3 personalizzate

Nell’articolo di oggi andremo a vedere come creare scrollbar css3 personalizzate senza l’utilizzo di javascript.

DISCLAMER: Attenzione questo articolo usa la proprietà ::webkit che è disponibile solo su browser che usano webkit come motore (leggasi al momento della stesura dell’articolo: Chrome, Safari, Opera). Se volete ottimizzare per firefox dovrete ricorrere a javascript per il momento. In ogni caso niente paura, se i vostri utenti useranno Firefox avranno semplicemente la scrollbar di default del browser senza personalizzazioni.

DEMO

Grazie all’utilizzo dei css3 possiamo facilmente personalizzare le scrollbar non solo della finestra del browser (html, body) ma anche di eventuali div interni al sito che abbiano la proprietà overflow:scroll con altezza impostata.

Gli elementi fondamentali per la personalizzazione sono 3:

::-webkit-scrollbar : definisce la dimensione e colore di base della scrollbar.

::-webkit-scrollbar-track: definisce il colore e l’aspetto della “guida”

::-webkit-scrollbar-thumb : definisce colore e aspetto dell’elemento visivo a scroll.

Esempio Pratico pronto all’uso

HTML

<div class="box" id="demo1">  <div class="force-overflow"><!-- simula la presenza di testo / non necessario --></div>  </div>

CSS

.box{
  height: 300px;
  width: 100%;
  background: #F5F5F5;
  overflow-y: scroll;
  margin: 15px 0px;
}
.force-overflow{min-height: 450px;  } /*Serve solo a simulare l'overflow dentro il box creato senza doverlo riempire di testo*/ 


#demo1::-webkit-scrollbar,
#demo2::-webkit-scrollbar,
#demo3::-webkit-scrollbar {
	width: 10px;
	background-color: #F5F5F5;
}


/** DEMO1 */
#demo1::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#demo1::-webkit-scrollbar-thumb {
	background-color: #a61414;
	border: 1px solid #820c0c;
}

/** DEMO2 */
#demo2::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#demo2::-webkit-scrollbar-thumb {
	background-color: #0ae;
	background-image: -webkit-gradient(linear, 0 0, 0 100%,
	                  color-stop(.5, rgba(255, 255, 255, .2)),
					          color-stop(.5, transparent), to(transparent));
}

/** DEMO3 */
#demo3::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#demo3::-webkit-scrollbar-thumb {
	background-color: #F90;
	background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
     transparent 25%,
     transparent 50%,
     rgba(255, 255, 255, .2) 50%,
     rgba(255, 255, 255, .2) 75%,
     transparent 75%,
     transparent)
}

Ovviamente questi sono solo esempi, potete personalizzarli con i colori che meglio si adeguano alle vostre necessità agendo sul css del scrollbar-thumb

Conclusioni

Se volete una soluzione cross-browser vi consiglio comunque di usare una soluzione javascript come QUESTA.

Se invece volete una soluzione rapida (anche solo per fare delle prove rapide) questa versione fa al caso vostro.

Se questo articolo ti è piaciuto condividilo sui tuoi social network preferiti!

Image credits disponibile su Shutterstock