Ho scritto questo plugin jQuery che trasforma un div contenitore(wrapper) che contiene un div figlio(scroller) in un riquadro con contenuto scorrevole verticalmente usando due pulsanti su e giù.

Guarda la demo live

Testato e funzionante anche su dispositivi mobili touch screen iphone e Android !

Il contenuto del div scroller può essere qualsiasi elemento html (anche solo una tabella, a differenza di altri plugin! :P )

Il plugin calcola automaticamente l’altezza del div scroller.

Si possono utilizzare più istanze di scroller nella stessa pagina cambiando semplicemente gli id del div wrapper, del div scroller e dei pulsanti.

Si può impostare di quanti pixel deve scorrere il contenuto e la velocità di scorrimento.

Facilissimo da usare:

  • basta creare due div, uno dentro l’altro;
  • il div esterno sarà il contenitore;
  • il div interno sarà lo scroller;
  • due pulsanti per scorrere su e giù;
  • tutti gli elementi inseriti all’interno del div scroller scorreranno alla pressione dei pulsanti.

 

1
2
3
4
5
<div id="wrapper" style="width:350px;height:120px;">
	<div id="scroller">. . . </div>
</div>
<p><input id="su_btn" type="button" value="su" /> 
<input id="giu_btn" type="button" value="giù" /></p>

Includere i files jQuery e applicare il plugin al div contenitore:

7
8
9
10
11
12
13
14
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.verticalscrollplus-1.0.js"></script>
<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
      $("#wrapper").verticalScrollPlus({step:100});
      $("#wrapper2").verticalScrollPlus({speed: 1500, step: 50, upID: "#su_btn2", downID: "#giu_btn2", scrollerID:"#scroller2" });
  });
  </script>

Se reputi che il jQuery Vertical Scroller Plus Plugin ti sia stato utile, pensa ad una libera donazione come incentivo allo sviluppo futuro. Ti ringrazio anticipatamente.





Il plugin può essere scaricato da:

http://plugins.jquery.com/content/verticalscrollerplus-10

jquery.verticalscrollplus-1.0.js

Plugin options:

  • speed : quanto è veloce l’animazione di scorrimento verticale;(default = 500)
  • step: di quanti pixel scorre il contenuto ad ogni pressione di tasto su oppure giù;(default = 60)
  • upID: id dell’elemento che fa partire l’animazione verso su;(default = #su_btn)
  • downID: id dell’elemento che fa partire l’animazione verso giù;(default = #giu_btn)
  • scrollerID: id dell’elemento il cui contenuto scorrerà verticalmente;(default = #scroller)