Personalizza le Barre di scorrimento del tuo sito!

Le barre di scorrimento (o scrollbar) sono un elemento grafico che è possibile personalizzare tramite codice CSS, come ogni altro oggetto presente sulle pagine di un sito.
Vediamo ora, in dettaglio, le modifiche più frequenti.

Come visualizzare le barre di scorrimento

In una pagina web è spesso necessario visualizzare dei testi molto lunghi, senza rovinare l'impostazione grafica data alla pagina (un testo molto esteso, in altezza o in larghezza, rovinerebbe la disposizione grafica del sito).
La soluzione ottimale risulta in questi casi essere l'inserimento delle scrollbar, in modo da rendere il testo consultabile, dagli utenti interessati, scorrendolo mediante esse.
La proprietà CSS utile per visualizzare le scrollbar è overflow, che ha i seguenti valori:

• hidden: il testo in eccesso, rispetto alle dimensioni del box di testo, verrà tagliato

• visible: il testo in eccesso verrà forzato ad essere visualizzato

• auto: se il testo eccede i limiti, in orizzontale o verticale, verrà inserita la corrispondente scrollbar

• scroll: le scrollbar verranno visualizzate in ogni caso
  

In questo esempio, i div di classe codice utilizzeranno le barre di scorrimento, quando il testo eccede i 300px, in altezza o in larghezza.

div.codice {
	overflow: auto;
	width: 300px;
	height: 300px;
	padding: 5px;
}

Il codice sopra riportato, anche se in piena regola con il W3C, non é supportato da tutti i browser: presenta infatti alcune lacune nei browser più datati, come Internet Explorer 5.0 e 5.5, peraltro ormai in via di estizione.
Se si desidera rendere il codice adatto a qualunque browser, è necessario correggere i problemi di box modeling dei suddetti browser, tramite i diversi workaround presenti sul web, tra cui possiamo citare l'articolo Html.it.

Barre di scorrimento colorate

Un effetto grafico molto interessante, dal punto di vista dell'utente meno attento agli standard web, risulta essere la colorazione delle barre di scorrimento del browser.
E' indispensabile premettere che questo effetto non è supportato da tutti i browser, in particolare il solo Internet Explorer, dalla versione 5.5 in poi, dispone di tale supporto. Questa situazione si è verificata in quanto la colorazione delle scrollbar non è una caratteristica presente negli standard W3C e quindi non è un requisito per i vari browser.
Vediamo ora un esempio in cui sono le barre laterali del browser ad essere personalizzate.

body {
	scrollbar-3dlight-color: orange;
	scrollbar-arrow-color: #313131;
	scrollbar-base-color: red;
	scrollbar-darkshadow-color: #80FFFF;
	scrollbar-face-color: red;
	scrollbar-highlight-color: rgb(50,0,1);
	scrollbar-shadow-color: rgb(112,22,21);
	scrollbar-track-color: black;
}