Le scrollbar che compaiono nelle pagine web sono pensate per muoversi all'interno di un'area con dimensioni superiori al rettangolo che la contiene.
In realtà le scrollbar del browser possono essere riutilizzate anche per altri scopi. A titolo di esempio si immagini di voler utilizzare (all'interno di una pagina web) una normale scrollbar per scorrere un elenco di "record" (ad es. provenienti da un web service) vedendoli a blocchi di N per volta. Il funzionamento sarebbe simile a quello della classica paginazione di dati su web, con la differenza che lo strumento per scorrere l'elenco non è il click su pagina successiva o precedente, bensì il muovere il track di una normale scrollbar.
Generalizzando, il problema è quello di fare scroll logico di un range di valori [min, max] vedendone pageCount per volta.
La soluzione al problema è relativamente semplice: basta avere due DIV annidati. Il DIV più interno avrà un'altezza pari a:
altezza del DIV contenitore * [max - min + 1] / pageCount
Immaginando una scrollbar verticale (il discorso è analogo se fosse orizzonale), la larghezza dovrebbe invece essere pari alla dimensione della scrollbar (vedi post precedente). A questo punto il gioco è fatto: basta intercettare l'evento di scroll e calcolare il range attualmente visibile in base alla posizione attuale del track della scrollbar.
Il codice che segue esemplifica il discorso (fa uso di MooTools):
<
script src="http://mootools.net/mootools.js"></script>
<script type="text/javascript">
function getScrollSize() {
// vedi post precedente
}
var
Scrollbar = new Class({
initialize: function(id, range, pageCount) {
this.id = id;
this.scrollbar = $(id);
this.range = range;
this.pageCount = pageCount;
this.totalCount = this.range[1] - this.range[0] + 1;
// Scrollbar resize.
this.scrollbar.setStyles( {width: getScrollSize() + "px", overflowX: "hidden", overflowY: "scroll"} );
this.scrollbarSize = parseInt(this.scrollbar.getStyle("height"), 10);
this.scrollAreaSize = Math.ceil(this.scrollbarSize * this.totalCount / this.pageCount);
// Necessary to resize scrollbar track.
this.inner = new Element("div").injectInside(this.scrollbar);
this.inner.setStyles({margin: 0, padding: 0, width: "1px", height: this.scrollAreaSize + "px"});
this.scrollbar.scrollHeight; // Force IE to resize scrollbar track.
// Events.
this.onScroll = Class.empty;
var This = this;
this.scrollbar.addEvent("scroll", function() { This.onScroll(This) } );
},
getRange: function() {
var min = this.range[0] + Math.ceil(this.scrollbar.scrollTop * this.totalCount / this.scrollAreaSize);
var max = min + this.pageCount - 1;
if (max > this.range[1]) max = this.range[1];
return [min, max];
}
});
window.onload = function() {
var s = new Scrollbar("scroll", [1, 100], 10);
s.onScroll = function(scrollbar) {
window.defaultStatus = scrollbar.getRange();
}
}
</
script>
<
div id="scroll" style="height: 100px;"></div>