jQuery: implementare l'infinite scroll

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.