Jquery.scrolling: controllare la comparsa e la scomparsa degli elementi nel Viewport

Jquery.scrolling: controllare la comparsa e la scomparsa degli elementi nel Viewport

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> :

 

 Utilizzo

Per prima cosa occorre attivare il plugin per uno o più elementi utilizzando un apposito selector jquery:

 

Oppure creando un elemento mediante l'apposita sintassi jQuery:

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:

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:

 

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

About Ryan

IT Project Manager, Web Interface Architect e Lead Developer di numerosi siti e servizi web ad alto traffico in Italia e in Europa. Dal 2010 si occupa anche della progettazione di App e giochi per dispositivi Android, iOS e Mobile Phone per conto di numerose società italiane. Microsoft MVP for Development Technologies dal 2018.

View all posts by Ryan

2 Comments on “Jquery.scrolling: controllare la comparsa e la scomparsa degli elementi nel Viewport”

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


The reCAPTCHA verification period has expired. Please reload the page.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.