Come posso creare l'effetto infinite scroll con jQuery?

Come posso creare l'effetto infinite scroll con jQuery?

Di seguito la mia risposta ad una domanda che trae ispirazione dalla tecnica denominata infinite scroll implementata su molti siti.

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.php", { 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.

Torna su