Il mio amico Paolo Loschi mi ha recentemente sottoposto una serie di siti che utilizzano le nuove tecniche jQuery / CSS3 per la realizzazione di effetti in stile Flash. Molti dei siti proposti sono stati recensiti da CSS Winner e sono per lo più esempi di uso avanzato dello scrolling jQuery (verticale). In questo articolo vorrei parlare dell'evento scroll() di jQuery, poichè questo tipo di siti lo utilizza per associare azioni sui blocchi e le immagini.
Sintassi e descrizione
scroll() è una scorciatoia per .bind('scroll', handler) quando viene considerato come evento con relativa funzione di callback (handler) e per .trigger('scroll') quando viene usato direttamente per innescare l'azione sull'elemento (nessun parametro).
Questo evento viene legato ad un elemento solo quando l'utente scrolla l'elemento in questione (sia usando le scrollbar che la rotellina del mouse). In genere viene applicato all'oggetto globale window, ma può anche essere utilizzato su iframe o su quegli elementi in cui la proprietà CSS overflow è stata impostata su scroll (o anche su auto, qualora la larghezza o altezza dell'elemento è inferiore alla larghezza o altezza effettive dei suoi contenuti).
Esempi d'uso
L'evento può essere usato in questo modo:
$('#target').scroll(function() {
console.log('Scroll!');
});
L'azione associata all'evento viene eseguita ogni volta che l'utente esegue lo scrolling dell'elemento. L'evento può anche essere invocato manualmente, senza parametri:
$('#other').click(function() {
$('#target').scroll();
});
L'oggetto globale window, usato comunemente per gestire lo scrolling dell'intera finestra del browser, può anche essere utilizzato (come detto) sugli elementi iframe che, ricordiamolo, vengono considerati nel DOM come documenti a se stanti:
$(window).scroll(function() {
$('#navigation').css('top', $(window).scrollTop());
});
Il codice di cui sopra serve ad emulare il posizionamento fisso in Internet Explorer 6.