In questo articolo vedremo come implementare la tecnica dell'infinite scroll.
Per implementare questa tecnica dobbiamo per prima cosa intercettare l'evento scroll
sulla pagina e capire quando l'utente è
giunto alla fine dei contenuti. Quindi effettuiamo una chiamata AJAX usando un contatore progressivo che verrà gestito dal codice lato
server come un cursore per la paginazione.
(function( $ ) {
$( document ).ready(function() {
var loading = false;
sessionStorage.setItem( "index", "1" );
$( window ).scroll(function() {
var winTop = $( window ).scrollTop();
var winHeight = $( window ).height();
var docHeight = $( document ).height();
var diff = ( winTop + winHeight ) + 250;
if ( diff >= docHeight ) {
if ( loading == false ) {
loading = true;
$.get( "/ajax/posts", { index: sessionStorage.getItem( "index" ) }).done( function( html ) {
$( "body" ).append( html );
sessionStorage.setItem( "index", parseInt( sessionStorage.getItem( "index"), 10 ) + 1 );
loading = false;
});
}
}
});
});
})( jQuery );
Abbiamo utilizzato il session storage per memorizzare ed incrementare il nostro contatore progressivo. Si tratta di una soluzione che ci evita i noti problemi derivanti dal contesto di esecuzione delle closure JavaScript.