Site icon Ryadel

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

<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

Exit mobile version