Realizzare un Horizontal scroll layout con Jquery Custom Scrollbar

By Andrea Marchetti - 23 Ott , 2012

Realizzare un Horizontal scroll layout con Jquery Custom Scrollbar
Jquery Layout

Oggi andiamo a  realizzare una layout orizzontale animato con Jquery Custom Scrollbar. Questo plug-in permette di scrollare orizzontalmente dei contenuti (con un elegante effetto easing) tramite una barra customizzata o la rotella del mouse.

In questo articolo aggiungeremo la fuzionalita di “scrollare” i contenuti tramite un menu. Ogni link del menu corrisponde a una “pagina” che viene visualizzata tramite uno scroll orizzontale.

Come prima cosa bisogna includere nell’header della nostra pagina Jquery, jquery-ui, jquery-mousewheel e il plug-in Custom Scrollbar con il suo stile.

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.mCustomScrollbar.js"></script>
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

Dopo aver fatto questo bisogna inizializzare il plug-in, la sitassi qui di seguito specifica il contenitore dello scroll (nel nostro caso il div .slider) e altre opzioni (per esempio l’inerzia dell’animazione):

$(".slider").mCustomScrollbar({
horizontalScroll:true,
scrollInertia:1100,
advanced:{
autoExpandHorizontalScroll:true
}

Fatto questo impostiamo l’html, che nel nostro caso consiste nel div contenitore .slider che contiene le pagine costituite dai div .line-element, ogni “pagina” ha un id di riferimento (#page-1,#page-2,…):

<div class="slider">
<div class="line-element" id="page-1">
</div>
<div class="line-element" id="page-2">
</div>
<div class="line-element" id="page-2">
</div>
...
</div>                

Ora le “pagine” vengono scrollate tramite la barra e la rotella del mouse. Per far si che le “pagine” vengano scrollate tramite i link di un menù utilizziamo il metodo “scrollTo” che il plug-in Custom Scrollbar ci offre e un pizzico di Jquery.

Ogni “pagina” all’interno della area scrollabile ha un id univoco per esempio “id=page-1”, questo ci servirà per associare la “pagina” al link di riferimento per esempio “home”, vediamo come:

/* Navigation */
$(".menu a").click(function(){
var myid= $(this).attr("href");
$(".slider").mCustomScrollbar("scrollTo","" + myid + "");
});

Il codice non fa altro che, prendere l’attributo “href” dell’ link  cliccato nel menu, assegnarlo alla variabile “myid” e passarlo al metodo “scrollTo”, che scrollerà fino alla pagina con id corrispondente.

Possiamo sviluppare la struttura aggingendo quante pagine vogliamo, logicamente aggiungendo il link di riferimento nel menu. La struttura funziona anche con javascript disabilitato, le “ancore” dei link rimandano ai div con id corrispondente.

Abbiamo aggiunto un piccolo codice Jquery che assegna una classe “selected” al link che abbiamo cliccato nel menu, in modo da sapere in che pagina ci troviamo durante la navigazione.

$(".menu a").click(function(){
var myid= $(this).attr("href");
$(".menu a").removeClass('selected');
$(this).addClass('selected');
$(".slider").mCustomScrollbar("scrollTo","" + myid + "");
});

L’esempio completo è disponibile per il download qui di sotto.

Stay tuned!

AGGIORNAMENTO:
Ora l’horizontal scroll layout è Responsive!
Visita: http://www.marchettidesign.net/2013/01/rendere-responsive-una-struttura-animata-in-jquery/

demo

Se ti và ringraziami con un Like a MarchettiDesign.net.

Oppure offrimi un caffè :-)
download

Commenti Facebook

45 Commenti

  1. Massimiliano ha detto:

    salve posso implementarlo per un scrollbar in verticale? con questo in html:

    …testo…

  2. Maurizio ha detto:

    Ciao bel tutorial, lo sto utilizzando per uno slider di fotografie, senza del testo e volevo chiederti una cosa: e’ possibile rendere le immagini ridimensionabili in altezza? ovvero se ridimensiono la finestra le immagini e la barra vorrei che rimenssero sempre visibilli.
    grazie
    Ciao
    Maurizio

    • Afmarchetti ha detto:

      Ciao Maurizio,
      ora l’altezza dello slider è 600px, se per “sempre visibili” intendi che le immagini siano alte l’intera altezza della pagina, si può fare con i css e javascript.

  3. Criss ha detto:

    Your download is for a vertical scrolling, not the horizontal showed in the Demo. How do I change that?

  4. ivan ha detto:

    Dove imposto di quanto devo far spostare la visuale? .. vorrei accelerarla un po’
    grazie

  5. ivan ha detto:

    EDIT: compimenti per l’ottimo lavoro .. 😉

  6. rosario ha detto:

    Ciao molto utile come tutorial, vorrei chiederti e se volessi utilizzare “le frecce” per scrollare le pagine? quindi su, giù, destra, sinistra!?!?
    Grazie!

  7. Max ha detto:

    Grazie per l’ottimo tutorial era proprio quello che cercavo da mesi per neofita come me.
    Vorrei chiederti un consiglio.
    Ho cercato di inserire un widget per visualizzare la cronologia di un utente twitter in una pagina ma purtroppo non funziona, ossia non viene visualizzato.
    Come potrei fare?
    Grazie.
    Max

    • Andrea Marchetti ha detto:

      Ciao Max, grazie dei complimenti 😉
      prova a usare il widget Rss, inserisci all’interno del widget il link alla pagina twitter in formato rss..

      • Max ha detto:

        Grazie per la tua prontissima risposta.
        Proverò a seguire il tuo consiglio e vedrò di documentarmi come fare.

        Nel frattempo ho fatto un giro sul forum di Twitter per gli sviluppatori ma a quanto ho capito sembra che spingano per l’utilizzo del widget.

        Se riesco a combinare qualcosa ti informo.
        Ciao
        Max

  8. Nico ha detto:

    Ciao Andrea !
    L’ultima pagina, in questo caso Contacts non rimane allineata come le altre, il menù risulta su sfondo bianco quello della pag precedente anzichè scorrere sino sul grigio, di conseguenza lo sfondo grigio a dx non compare..
    Grazie
    N

    • Andrea Marchetti ha detto:

      Ciao Nico,
      lo scroll si comporta così perchè arriva alla fine dello scorrimento orizzontale “possibile”. Per far scrollare l’ultimo box a sinistra come intendi si può aggiungere un margine destro al div contenitore che viene scrollato:

      .slider .my_container{overflow:hidden;margin-right: 250px;}

  9. Franco ha detto:

    Ciao Andrea,
    mi piace molto questa soluzione a scorrimento orizzontale e mi piacerebbe utilizzarla.
    Stavo pensando ad una form per i contatti da inserire appunto nella pagina contact. Hai qualche suggerimento?

    grazie
    F.

  10. Alessandro ha detto:

    Ciao Andrea e grazie per tutorial,
    come faccio ad aggiungere freccia dx e sx anche che non facciano scrollare ma solo per evidenziare che la barra va trascinata per muovere le pagine?
    Grazie ciao
    A

    • Andrea Marchetti ha detto:

      Ciao Alessandro,
      postresti posizionare due div uno per la freccia sinistra e l’altro per la freccia destra appena dopo il tag body. Tramite css:

      position: absolute; top: 50%; left:0;

      posizioni la freccia sx, per la dx invece:

      position: absolute; top:50% right:0;

      😉

  11. Nico ha detto:

    Ciao Andrea! Ancora una cosa: per dare una fine alla scroll bar in modo che termini sull’ultima immagine e non esca dallo schermo?
    Grazie e complimenti davvero!
    N

  12. Leonardo ha detto:

    Ciao,
    grazie per il tutorial molto valido.
    Ho una domanda riguardo al jquery che hai inserito nel demo: come faccio ad attribuire la classe “selected” alle voci del menù (e dunque evidenziarle) mentre mi sposto scrollando o trascinando la barra?
    Adesso se clicco su “contacts” e poi torno scrollando su “home” la sezione “contacts” rimane evidenziata…

    Grazie in anticipo!

  13. Criss ha detto:

    Ciao Andrea, spero di ricevere una risposta prima che vai (se vai) in ferie. 🙂
    Sono diversi mesi che sto combattendo con un problema allo script. Puoi vedere su http://www.agendadelvolo.info che lo scroll di ogni singola box va al limite sinistro dello schermo. Io vorrei che si fermasse al menu. Un aiuto? Thanx

    • Andrea Marchetti ha detto:

      Ciao Criss,
      se vedi nel tutorial utilizzo margin-left:190px; (applicato ai div .line-element) per far si che i blocchi di contenuto scrollino fino al bordo del menu e non sotto.

  14. Criss ha detto:

    Ciao di nuovo, prendo lo spunto del mio ultimo post per chiederti un piccolo aiuto, sempre sul sito http://www.agendadelvolo.info.
    Se lo guardi adesso, ho risolto il problema del post precedente intervenendo sullo script che permette lo scroll, mettendo un offset negativo:


    $(document).ready(function () {
    $.localScroll.defaults.axis = 'x';
    $('#menu').localScroll({
    target:'body',
    offset: -225
    });
    });

    Ora sto cercando di avere il footer che si muove con le box. E così succede, con il problema che non si allinea bene a 25px (ma c’è uno scarto sempre maggiore per ogni slide) ed è anche agganciato al contenuto delle box stesse (se scrolli verticalmente, rimane attaccato alle box).
    Non so se mi sono spiegato. Secondo me bisogna semre intervenire sullo script jquery. Ti sarei davvero grato per un aiuto, magari anche in privato.

  15. silvia ha detto:

    Ciao Andrea, credi sia possibile usare l’horizontal scroll bar in worpress per cerare una pagina di archivo blog con gli excerpt (tutta orrizzontale)? Sono una inesperta sto andando a tentativi, vorrei solo sapere se sono tutti vani…

    • Andrea Marchetti ha detto:

      Ciao Silvia,
      si si può utilizzare, non ho ben capito come vorresti strutturare la pagina, ti consiglio di non creare uno scroll troppo lungo per evitare problemi di caricamento..

  16. Isabella ha detto:

    Ciao Andrea.
    Molto bello e ben spiegato, cosa che non sempre capita. Però mi piacerebbe poter aggiungere ai link del menu (che funzionano benissimo) altri link a siti esterni e soprattutto a “pagine interne”, inserendoli nel testo delle pagine. Ho provato a usare l’id della “pagina” come segnalibro e anche a inserire appositi segnalibri, ma sembra che jquery.mCustomScrollbar.js uccida gli altri link. Come posso fare?

    • Andrea Marchetti ha detto:

      Ciao Isabella,
      per aggiungere una pagina copia e incolla il div .line-element e assegnagli un id=”TUO_ID”. Successivamente aggiungi al menu un link, nell’attributo href specifica href=”#TUO_ID”

  17. Isabella ha detto:

    Grazie. Non mi ero spiegata bene: intendevo link ad ancore interne al di fuori del menu. Comunque online funziona tutto. Semplicemente non funzionava nella visualizzazione anteprima nel browser di Microsoft Expression Web che non funzionava.
    Grazie ancora

  18. valentina ha detto:

    ciao
    innanzitutto, bello, semplice e pratico.
    L’unico problema è che ridimensionandolo ad un box minore e volendolo mettere alla base di una pagina sito parallax, quando clicco sul numero della pagination per scrollare il testo alle altre pagine, mi sposta l’intero il box al top dello schermo, anche se inserito in un div

    • Andrea Marchetti ha detto:

      Ciao Valentina,
      non ho ben capito, combinando lo script con un altro script possono nascere conflitti tra i posizionamenti..

  19. zambu ha detto:

    Ciao! innanzitutto grazie mille per questo tutorial! una domanda -non sono riuscito a sistemare in nessuna maniera –

    esiste un sistema per far in modo che vada a caricare la pagina presente nell’url e non sempre e comunque quella principale?
    per esempio se la mia pagina è http://www.sito.com/#contatti mi carica sempre e comunque la parte “index” della pagina e non fa visualizzare la parte dell’indirizzo #contatti.
    grazie mille!

  20. Jacopo ha detto:

    Ciao Andrea, ti scrivo per chiederti se posso mettere un immagine di sfondo a tutta la pagina perchè a me non funziona, ho provato in vari modi ma non va.
    Non capisco perchè se scrivo questa proprietà CSS non me lo applica:


    background-image: url(img/bg-line.png) repeat-x;

    Devo creare una linea del tempo come sfondo ma non riesco.
    Potresti aiutarmi?

    PS: Complimenti!

    • Andrea Marchetti ha detto:

      Ciao jacopo,
      se il percorso dell’immagine è corretto devi inserire nel css:

      body{background: #e2e2e0 url(img/mio-background);}

      P.S
      Applicalo al body 😉

  21. Davide ha detto:

    Ciao, vorrei sapere se fosse possibile renderlo responsive….

  22. Alberto ha detto:

    Ciao Andrea.. la tua programmazione in orizzontale è veramente bella e semplice.. la sto usando in Office share point designer e posso mettere tabelle ed altro ma quando aggiungo una immagine non mela fa vedere..lo spazio è occupato ma non si vede..scusami magari è una stupidata ma sono un principiante. Grazie.Alberto.

  23. Stefano ha detto:

    Ciao Andrea
    Ma questo plugin può essere adottato anche con wordpress?
    Se sì qual è la procedura?

    Grazie
    Stefano

    • afmarchetti ha detto:

      Ciao Stefano, si. Si può “montare” questo codice in un tema wordpress utilizzando un loop personalizzato, non è però implementazione molto semplice.

  24. vanessa ha detto:

    Ciao Andrea,
    intanto ti ringrazio per questa guida perchè facendo qualche piccola modifica nel css è calzata a pennello per una pagina che sto realizzando.
    Dal momento che non sono esperta in Javascript ti chiedo: é possibile che integrando questo plug in nella pagina mi si causi un rallentamento nel caricamento all’apertura?

    Grazie!
    Vanessa

    • afmarchetti ha detto:

      Ciao Vanessa, è possibile, può dipendere dal Browser o dal computer che stai utilizzando. Prova a visualizzare la struttura su un altro computer e vedi se ti da problemi 😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *