Recentemente ho dovuto personalizzare delle barre di scorrimento per il sito Cantiere Triplok. Le soluzioni che prevedono il solo utilizzo di CSS non sono sufficienti, in quanto permettono di agire solo su un piccolo insieme di caratteristiche (colore, dimensione), e soprattutto non sono compatibili con tutti i browser.

Questo il risultato che volevo ottenere:

L’unica via percorribile è quindi quella di Javascript / jQuery. Dopo una rapida ricerca ho deciso di utilizzare jscrollpane, un plugin jQuery che mi ha dato la possibilità di raggiungere il mio obiettivo (l’immagine in cima a questo post mi ha convinto che jscrollpane fosse il plugin giusto, esempio della personalizzazione delle barre di scorrimento che è possibile raggiungere).

Il codice javascript non ha nulla di eccezionale

jQuery(function () {
 jQuery(".scrollable").jScrollPane({
   showArrows:true,
   verticalDragMinHeight: 40,
   verticalDragMaxHeight: 40
 });
});

Un po’ di CSS ha fatto il resto: ho definito due immagini per le freccine in alto e in basso, e una terza immagine per il cursore verde.