Corsi on-line

Barre di scorrimento customizzate con jScrollPane

In alcuni progetti web capita di dover inserire dei box preposti a contenere una grande quantità di contenuto. Una scelta piuttosto comune è, per questo tipo di esigenze, impostare mediante i CSS la proprietà overflow su auto in modo da aggiungere una barra di scorrimento interna al nostro box qualora i contenuti superino la sua naturale capienza.

Volendo creare un semplice box di questo tipo sarà sufficiente creare una classe (ad es. “notizie”) così stilizzata:

div.notizie {
  width: 300px;
  height: 200px;
  overflow: auto;
}

Ovviamente la barra di scorrimento visualizzata sarà quella prevista di default dal vostro browser (che come sappiamo è limitatamente stilizzabile mediante i CSS).
Una soluzione alternativa, e stilisticamente più gradevole, è quella di ricorrere a qualche script apposito per la gestione dei contenuti; tra questi vi segnalo l’ottimo jScrollPane, un bellissimo plugin per jQuery che vi consentirà di creare barre di scorrimento completamente customizzate.

Mediante questo script i contenuti “in eccesso” potranno essere visualizzati draggando la barra di scorrimento oppure utilizzando la “rotellina” del mouse (grazie al plugin MouseWheel) esattamente come accade per i frame della pagina.

Un esempio di utilizzo di questo plug-in può essere visto all’opera sul sito del Corriere della Sera. Segue uno screenshot:

Non vi resta che armarvi di Photoshop e disegnarvi da soli gli elementi della vostra nuova barra di scorrimento… che per la prima volta sarà perfettamente adeguata al look and style delle vostre pagine web!

Post correlati
  • Piero

    Un’immagine più allegra però potevi metterla.. 10 morti e una bambina vittima di abusi :S

  • Giovanni

    Grazie per la notizia ma qualcosa di più dettagliato no? Cosa devo includere nella pagina web?? Perchè non scrivere una gudia passo-passo?

I più letti del mese
Tematiche