Blog

Personalizza le Barre di scorrimento del tuo sito!

Desideri sapere come attivare o personalizzare le barre di scorrimento del tuo sito? Qui troverai tutto ciò che devi sapere su di esse.

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;
}

Il codice sopra riportato può essere utilizzato sulle scrollbar specifiche di un div o di un qualunque altro oggetto per cui siano state abilitate.

tagsbarre di scorrimentocsshtmlscrollbarpersonalizzare scrollbar

5 commenti

  1. Stefano florio6 maggio 2009, 12:36:43

    Una spiegazione chiara che finalmente spiega alcune cose di base, grazie. Però non c'è niente sul tema, cioè "come personalizzare la scrollbar".

  2. Loris.genetti6 maggio 2009, 13:30:25

    @stefano florio:
    Se hai richieste particolari riguardo la personalizzazione delle scrollbar ti invito ad esporle, cercheremo di approfondire magari in un prossimo articolo.

  3. Peter9 giugno 2009, 07:50:06

    stavo cercando informazioni in merito alla modifica del formato delle barre, ad esempio le dimensioni e come conviene muoversi ( se conviene ) per creare delle barre completamente personalizzate anche nella grafica.
    Ciao e grazie

  4. Valentina2 luglio 2009, 15:26:56

    Scusate, in Explorer vedo il cambiamento, ma in mozilla no.. c'è una soluzione??
    grazie valentina

  5. Loris.genetti2 luglio 2009, 15:37:37

    Firefox e tutti i browser in linea con il W3C non supportano la colorazione delle barre, proprio per rispettare gli standard e non interagire con le preferenze degli utenti. Se desideri comunque scavalcare queste limitazioni, esistono funzioni Javascript adatte allo scopo. Ecco dove puoi trovare un buon esempio: http://www.dreamincode.net/forums/showtopic15885.htm

Solo gli utenti registrati possono lasciare commenti.

© Copyright ©2008-2019. Tutti i diritti riservati.