Restiamo nell’ambito del jQuery con questa scrollbar completamente customizzabile ad opera di Malihu. Come saprete non è proprio facilissimo trovare delle buone scrollbar open source, magari anche dotate di buona grafica. Quella che andiamo a vedere oggi è tanto facile da manipolare, quanto minimale nello stile.
Iniziamo includendo i necessari plugin, all’interno del tag <head>:
Il foglio di stile e i Javascript si trovano all’interno del pacchetto in download alla fine dell’articolo. Intanto modifichiamo lo stile dell‘index con del Css in linea:
Ora inseriamo i <div> nel <body> scrivendo il testo che vogliamo visualizzare (meglio abbondare!) all’interno del <div> con la classe content. Sono stabiliti i margini e la grafica, con la maniglia molto sottile e le due frecce in alto e in basso; lo scroll funziona anche con la rotella del mouse, anche se al momento non è attivo.
Your long content goes here...
Per attivare lo scroll, aggiungiamo nel <body> il seguente script:
Da qui possiamo quindi configurare:
- Il tipo di scrolling (verticale/orizzontale)
- L’ammontare della decelerazione (easing amount): 400 normale, 0 nessuna decelerazione.
- Il tipo di scrolling
- Il tipo di scrolling (verticale/orizzontale)
- L’altezza e la larghezza della maniglia dello scroll (“auto” si aggiusta larghezza/altezza in base al contenuto, “fixed” imposta dimensioni fisse).
- Supporto alla rotella del mouse (yes/no)
- Scrolling tramite i pulsanti-freccia (yes/no)
- Velocità dello scrolling dei pulsanti-freccia (1 indica la minore velocità, su una scala da 1 a 20).
Testiamo la nostra pagina.
All’interno del pacchetto trovate il file index con tutti gli esempi grafici commentati, basta copiare e incollare nel nostro file le porzioni di html interessate e in seguito modificarne Css e testo a piacimento.
Alla prossima!