Come personalizzare la scrollbar con jQuery e CSS

Tramite: O2O 04/01/2016
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

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

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

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

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....
Programmazione

Come usare gli icon fonts con i CSS

Web designer e sviluppatori utilizzano i file css per determinare lo stile delle pagine web e delle loro creazioni. Con l'avvento del css3 e con font sempre più moderni, è possibile effettuare maggiori personalizzazioni anche innovative, utilizzando...
Programmazione

Come cambiare un attributo CSS tramite JavaScript

In ambito informatico sono esistiti - ed esistono tutt'ora - molti linguaggi di programmazione per il web. Sebbene nessuno di essi sia davvero facile da apprendere, alcuni sono più intuitivi di altri e si prestano meglio allo sviluppo di contenuti interattivi...
Programmazione

Come realizzare un menu a discesa orizzontale con il CSS

Nella seguente pratica e rapida guida che vi esplicherò nei passaggi successivi, vi spiegherò specificatamente come si deve realizzare un menu a discesa orizzontale, soltanto utilizzando il foglio di stile (CSS) per il vostro bellissimo sito internet....
Programmazione

Come iniziare con JSON

Sia che siate degli studenti o dei programmatori di lungo corso sicuramente conoscerete la sigla Json che sta per JavaScript Object Nation. SI tratta infatti di un importantissimi linguaggio basato su javaScript Standard e utilizzato in AJAX come alternativa...
Programmazione

Come creare app in HTML5

Un'applicazione Web è alimentata da un browser tramite Internet e viene generalmente creata utilizzando HTML, CSS e JavaScript e può essere servita tramite un browser desktop o mobile. Un'applicazione web può essere costruita per imitare la funzionalità...