Come personalizzare la scrollbar con jQuery e CSS

tramite: O2O
Difficoltà: media
19

Introduzione

Le scrollbar di default dei browser fanno a pugni con il design del tuo sito? Ti piacerebbe poter creare delle barre di scorrimento personalizzate adatte allo stile delle tue pagine web? Leggi questa guida e scopri come farlo usando jQuery Custom Scrollbar. Grazie a questo plugin jQuery sarai in grado di personalizzare comodamente le scrollbar dei tuoi siti web applicando loro qualsiasi stile css tu voglia.

29

Occorrente

  • jQuery Custom Scrollbar
  • jQuery
39

jQuery Custom Scrollbar ti permette di personalizzare a tuo piacimento scrollbars sia verticali che orizzontali. Lo scrolling può essere fatto con la rotellina del mouse, con la tastiera del computer e anche con lo scorrimento touch per i dispositivi mobili. È possibile definire altezza, larghezza, e colore.

49

Prima di cominciare ricorda che per poter usare jQuery Custom Scrollbar sul tuo sito devi avere jQuery 1.4 o le versioni successive. Puoi scaricarlo da http://jquery. Com. Da segnare inoltre che Il plugin supporta i principali browsers: Chrome, Firefox, Internet Explorer e Opera. Seguite questa guida per vedere come fare, buon lavoro!

Continua la lettura
59

Ci sono una serie di plugin jQuery per personalizzare la barra di scorrimento. Uno che è veramente popolare è JScrollPane. JScrollPane converte la barra di scorrimento in struttura HTML in modo che possa essere completamente personalizzato con i CSS, e ha anche un migliore supporto cross-browser. Inoltre, con le API fornite è anche possibile impostare il comportamento della barra di scorrimento su alcuni movimenti del mouse. L'unico lato negativo è che si basa su una serie di altre librerie JavaScript: jQuery, rotellina del mouse. Tecnicamente, per dover caricare un sacco di JavaScript combinate potrebbero influenzare le prestazioni del sito web. Ma al momento, utilizzando jQuery è l'unica opzione migliore se siete preoccupati per il supporto del browser.

69

Scarica l'ultima versione di jQuery Custom Scrollbar dal sito dello sviluppatore all'indirizzo: http://manos. Malihu. Gr/tuts/m-custom-scrollbar-plugin. Zip. Estrai tutti i file e le cartelle dell'archivioe aggiungi query, jquery-ui, jquery-mousewheel e il plug-in di Custom Scrollbar con il suo css (query. Custom-scrollbar. Js e jquery. Custom-scrollbar. Css) nel tag della tua pagina htlm. Nel tag body della pagina htlm inserisci il tag div contenitore del testo che vuoi visualizzare nella barra di scorrimento personalizzata con la classe content. Una volta terminato devi rendere attivo lo scroll, aggiungendo sempre nel body, lo script seguente:.

79

Per modificare lo stile della scrollbar puoi usare il file jquery. MCustomScrollbar. Css che contiene uno stile di default e un gran numero di temi pronti all'uso oppure puoi creare un css solo tuo completamente personalizzato. A questo scopo puoi modificare direttamente il file jquery. MCustomScrollbar. Css oppure creare un foglio di stile nuovo valido per tutte le barre di scorrimento del tuo sito web o ancora inserire un css diverso per ogni scrollbar. Grazie a jQuery Custom Scrollbar potrai addirittura dare vita a barre di scorrimento con uno stile diverso all'interno della stessa pagina web. Per informazioni dettagliate sull'uso di jQuery Custom Scrollbar visita la pagina dello sviluppatore all'indirizzo http://manos. Malihu. Gr/jquery-custom-content-scroller/.

89

Guarda il video

99

Consigli

Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Come realizzare un finestra modale con jQuery

Una finestra modale è una finestra “figlia” bloccante, ossia una finestra che richiede una certa interazione dell’utente, prima che egli possa tornare ad operare sulla finestra “padre”. Nella progettazione delle interfacce, le finestre modali...
Programmazione

Come usare il metodo animate di jQuery

JQuery è una libreria di funzioni scritta in Javascript, che può essere utilizzata su diversi browser e permette di aggiungere delle funzionalità alle pagine HTML. Il comando Animate, come dice la sua traduzione dall'inglese: "Animato", permette di...
Programmazione

Creare una tabella dinamica parametrizzata in Jquery

Spesso capita di dover inserire una tabella nelle pagine web. In alcuni casi questo è un problema perché richiede un lungo procedimento. La soluzione è a portata di mano con jQuery, una libreria di funzioni Javascript per le applicazioni web. Il Javascript...
Programmazione

Come prendere le coordinate del mouse con JQuery

Il mouse è un piccolo dispositivo di cui spostamento sulla nostra scrivania determina un corrispondente spostamento del puntatore sullo schermo. Il dispositivo può essere utilizzato con molti programmi facilitando grandemente il compito dell'utente:...
Programmazione

Come utilizzare CSS3

Ora è d'obbligo avere una conoscenza dei termini per poter usare il nostro computer in maniera adeguata, necessario ed utile per essere pronti ed al passo con i tempi, i vocaboli sono tanti alcune volte è difficile capirne il significato anche perché...
Programmazione

Gli errori più comuni su CSS

Il linguaggio CSS (Cascading Style Sheets) si usa essenzialmente per la creazione di un sito web. Insieme all'HTML e al Javascript, formano una pagina web in tutto e per tutto. Il CSS, in particolare, si occupa di tutti quegli aspetti che vanno a comporre...
Programmazione

Come nascondere i paragrafi in Jquery con un click

Tutte le pagine web che quotidianamente utilizziamo sono ricche di effetti di ogni tipo, la cui presenza è garantita dall'impiego del linguaggio JavaScript. L'utilizzo di tale linguaggio non è del tutto immediato: l'esigenza di semplificare la creazione...
Programmazione

CSS: 10 cose da sapere

CSS è la sigla che sta per Cascading Style Sheets, ovvero i fogli di stile a cascata che servono per la gestione del layout di un sito web. Grazie ad essi è possibile interagire sugli aspetti visuali delle pagine, controllandone tutti gli elementi grafici....
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.