Ecco un nuovo tutorial per creare qualcosa di unico:
Personalizzare la scrollbar con jQuery e Css tramite jScrollPane.
jScrollPane è un ottimo plugin per jQuery che permette di convertire le usuali scrollbar create dal browser in una struttura HTML di facile personalizzazione tramite Css3 e quindi tiene un supporto completo tra i vari dispositivi.
Usarlo è veramente semplice, basta includere il plugin, il framework jQuery e lo style Css nella pagina in questione.
Cominciate scaricando le varie parti e mettendole nel vostro server:
- jquery.jscrollpane.css -> Il foglio stile che usa jScrollPane per funzionare.
- jQuery library -> ultima libreria jQuery
- jquery.mousewheel.js -> plugin opzionale da includere per scrollare il contenuto con la rotellina del mouse.
- query.jscrollpane.min.js -> jScrollPane Plugin.
Dopo aver scaricato le varie parti, dovrete inserirle all’interno del vostro “head”:
Attenzione: ovviamente dovete sostituire “www.tuodominio.com” con l’indirizzo in cui avete messo i file appena scaricati.
Sempre dentro al vostro “head” sarà sufficiente usare un selettore jQuery per attivare il plugin:
Attenzione: bisogna sostituire .classeElemento con la classe o l’ID dell’elemento nel quale volete attivare le scrollbar personalizzate.
Per modificare i colori della scrollbar basta semplicemente modificare il foglio stile CSS jquery.jscrollpane.css
Per vedere tutte le personalizzazioni possibili (che sono davvero tante) andate nel sito ufficiale nel quale troverete tutta la documentazione in inglese per modificare le vostre scrollbar e qualche tema già disponibile.
Usare jScrollPane su WordPress
Esiste anche lo stesso plugin realizzato per WordPress che potrete scaricare dal sito ufficiale: WP-jScrollPane