Con l'affermarsi del responsive design e dei layout adattivi diventa sempre più importante tenere traccia della presenza degli elementi man mano che essi diventano visibili all'interno del viewport, ovvero della zona del browser visibile all'utente. Sfortunatamente né il linguaggio javascript né il popolare framework jquery mettono a disposizione un modo nativo per controllare lo stato degli elementi HTML in conseguenza dello scroll della pagina.
Per rispondere a questa esigenza ho sviluppato il plugin jquery.scrolling, che può essere utilizzato proprio per assolvere a tale compito. Il plugin consente infatti di disporre di due eventi, scrollin e scrollout, che si attivano rispettivamente quando un elemento entra o esce dall'area di visualizzazione del viewport.
Gli eventi si attivano in conseguenza di uno scroll o di un resize, ma possono anche essere attivati manualmente nel caso di contenuto generato dinamicamente, ad esempio a seguito di chiamate AJAX. Il plugin supporta infatti ogni tipo di contenuto presente all'interno del DOM della pagina ovvero all'interno di frame o iframe in essa presenti.
Installazione
Installare il plugin è molto semplice: è sufficiente scaricare l'ultima versione dal sito ufficiale del progetto e quindi installarlo all'interno di una qualsiasi pagina web aggiungendo le seguenti linee di codice nel blocco <head></head> :
<script type="text/javascript" src="/yourpath/jquery.scrolling.js"></script>
Utilizzo
Per prima cosa occorre attivare il plugin per uno o più elementi utilizzando un apposito selector jquery:
$('selector').scrolling();
Oppure creando un elemento mediante l'apposita sintassi jQuery:
$('<div>content</div>').scrolling();
Una volta attivato è possibile effettuare un binding tra il proprio codice personalizzato e i nuovi eventi scrollin e scrollout resi disponibili dal plugin, come nell'esempio seguente:
$('selector').on('scrollin', function(event, $all_elements) {
// triggers when 'selector' element comes inside browser viewport.
// $all_elements contains all the appeared elements.
});
$('yourselector').on('scrollout', function(event, $all_elements) {
// triggers when 'selector' element goes outside browser viewport.
// $all_elements contains all the disappeared elements.
});
Il plugin mette anche a disposizione un apposito jQuery filter che può essere utilizzato in qualsiasi momento per controllare se l'elemento è visibile all'interno del viewport oppure no:
$('selector').is(':scrollin')
Demo ed esempi
Oltre all'esempio mostrato il plugin supporta molteplici funzionalità avanzate tra cui:
- configurazione di un context per l'attivazione di elementi situati all'interno di un frame o iframe.
- impostazione di un offset positivo o negativo per lanciare gli eventi prima o dopo la comparsa effettiva dell'elemento all'interno del viewport.
E molte altre. Per una guida completa si consiglia di fare riferimento alla home page del progetto o alla pagina di esempi e demo.
Link utili
- Home Page del progetto, dove è possibile prelevare l'ultima versione del codice.
- Repository GitHub, dove è possibile trovare il codice sorgente e contribuire allo sviluppo.
- Pagina di jquery.scrolling su NPM.org, il repository node.js che ospita tutti i principali plugin del framework jQuery.
- Scheda di jquery.scrolling su questo sito.
