Custom Scrollbar con Javascript

Immagini

di Michele Bertoli - michele@havana7.com

Quando si progetta un’interfaccia utente è necessario non lasciare nulla al caso. Soprattutto nell’eventualità in cui l’applicazione nasca con l’obiettivo di offrire un’esperienza appagante, creativa ed omogenea.
Uno degli elementi che spesso può cozzare con queste prerogative è la scrollbar.
La barra di scorrimento, infatti, varia da browser a browser e non sempre ci è dato di gestirne l’aspetto.
Internet Explorer mette a disposizione delle direttive CSS che permettono agli sviluppatori di modificare, in parte, le caratteristiche della scrollbar, ma il codice è mono-applicazione e poco elegante.

Se volessimo ad esempio costruire una barra di scorrimento perfettamente integrata con l’interfaccia, come nel caso della pagina dei prodotti Apple, dovremmo necessariamente appoggiarci a javascript. (Immagine 1)

Il concetto che sta alla base di una scrollbar di questo genere è banale, ma non del tutto ovvio: si tratta di spostare i contenuti in eccesso in base ai movimenti di un elemento draggabile che funge da slider, calcolandone di volta in volta la posizione in base ad alcune proporzioni.

In questo articolo vedremo come costruire una custom scrollbar verticale con jQuery http://jquery.com/ ed alcuni moduli di jQuery UI http://ui.jquery.com/.
L’intento è quello di presentare il lavoro in via generale in modo che l’applicativo possa adattarsi completamente al contesto in cui sarà inserito.

L’obiettivo iniziale consiste nel costruire una struttura simile al modello seguente.(Immagine 2)

Il tutto può essere rappresento dal markup sottostante.

<div id=”textbox”>
<div id=”text”></div>
</div>
<div id=”sliderbox”>
	<div id=”slider”></div>
</div>

Le componenti della struttura sono un elemento text che conterrà del testo o un qualsivoglia contenuto, un contenitore per il suddetto elemento (textbox), uno sliderbox che funge da track per la barra di scorrimento e lo slider vero e proprio. Ora diamo uno sguardo al codice CSS minimo necessario per una buona riuscita del progetto, una parte delle dichiarazioni è stata volutamente omessa allo scopo di lasciare piena libertà agli sviluppatori. Ad esempio è possibile utilizzare immagini per lo slider, in stile Apple.

div#textbox
{
	overflow:auto;
	position:relative;
}
 
div#text
{
	position:absolute;
}
 
div#sliderbox
{
	display:none;
}

In sostanza si tratta di gestire la position degli elementi text e textbox, nascondere la sliderbox e impostare su auto l’overflow del textbox in modo da assicurare, agli utenti che non abbiano javascript abilitato sul browser, l’accesso al testo con la barra di default.

E’ giunto il momento di occuparsi di javascript. E’ necessario, innanzitutto, includere le seguenti librerie: jquery.js, ui.core.js e ui.draggable.js. Fatto ciò passiamo ad analizzare il semplice script. Sull’evento onload dobbiamo innanzitutto verificare che sia presente del testo in eccesso, altrimenti è del tutto inutile presentare la barra di scorrimento.

$(function(){
if (($(“div#text”).height() - $(“div#textbox”).height()) > 0)
	{

In caso affermativo dobbiamo mostrare lo sliderbox e impostare a hidden la proprietà overflow del contenitore del testo. Così facendo il browser eviterà di applicare la barra di scorrimento di default al textbox.

$(“div#textbox”).css(“overflow”, “hidden”);
$(“div#sliderbox”).css(“display”, “block”);

Lo step successivo consiste nel calcolare un valore per l’attributo height dello slider, obiettivo che si concretizza mettendo in rapporto le altezze di text, textbox e sliderbox.
Ovviamente maggiore sarà il testo in eccesso, minore l’altezza dello slider.

var sliderHeight = ($(“div#textbox”).height() * $(“div#sliderbox”).height()) / $(“div#text”).height();
$(“div#slider”).height(sliderHeight);

Siamo ora giunti nel cuore dell’applicativo e cioè quella parte di script che rende draggabile, grazie al metodo draggable() di jQuery UI, il nostro slider.
E’ necessario passare due parametri alla funzione.
Il primo indica allo script di “bloccare” i movimenti dello slider all’interno dell’area del parent (l’elemento contenitore).
È molto importante perciò che l’attributo width di slider e sliderbox coincida.
Il secondo parametro ci permette di impostare una funzione da lanciare sull’evento drag causato dallo spostamento dello slider da parte dell’utente. Il codice da eseguire non fa altro che riposizionare il textbox, in base ai movimenti dello slider.
La posizione del testo sarà inversamente proporzionale allo spostamento dello stesso.
Andremo, infatti, a riscrivere l’attributo top dell’elemento text in base al rapporto che esiste tra lo spostamento e il testo in eccesso.

$(“div#slider”).draggable({
			containment: “parent”,
			drag: function(e, ui){
var textTop = (($(“div#text”).height() - $(“div#textbox”).height()) * ui.position.top) / ($(“div#sliderbox”).height() - sliderHeight );
	           $(“div#text”).css(“top”, textTop * -1 + “px”);
}
});
}
});

Non rimane che assemblare il tutto, applicando lo stile che meglio si integra con la vostra applicazione, e offrire ai vostri utenti una custom scrollbar.
______________________________________________________________

Michele Bertoli
michele@havana7.com
Studente all’università Cattolica del Sacro Cuore con 5 anni di esperienza alle spalle nello sviluppo di software gestionali multipiattaforma. Ama progettare e realizzare servizi Web 2.0, imparare nuove tecniche di programmazione e cimentarsi nella sperimentazione di sistemi di comunicazione evoluti come i social network.