Events

Event binding

jQuery event binding

Bind events with jQuery with standard jQuery event methods .on(), .off(), and .one(). Event names are namespaced with .infiniteScroll.

// jQuery
function listener(/* parameters */) {
  console.log('eventName happened');
}
// add event listener
$container.on( 'eventName.infiniteScroll', listener );
// remove event listener
$container.off( 'eventName.infiniteScroll', listener );
// add event listener to trigger once. note ONE not ON
$container.one( 'eventName.infiniteScroll', function() {
  console.log('eventName happened just once');
});

Vanilla JS event binding

Bind events with vanilla JS with .on(), .off(), and .once() methods.

// vanilla JS
function listener(/* parameters */) {
  console.log('eventName happened');
}
// add event listener
infScroll.on( 'eventName', listener );
// remove event listener
infScroll.off( 'eventName', listener );
// add event listener to trigger once. note ONCE not ONE or ON
infScroll.once( 'eventName', function() {
  console.log('eventName happened just once');
});

Infinite Scroll events

scrollThreshold

Triggered when scroll position is less than scrollThreshold option distance.

// jQuery
$container.on( 'scrollThreshold.infiniteScroll', function( event ) {
  console.log('Scroll at bottom');
});

// vanilla JS
infScroll.on( 'scrollThreshold', function() {...});

request

Triggered when Infinite Scroll makes the request for the next page to be loaded.

// jQuery
$container.on( 'request.infiniteScroll', function( event, path ) {
  console.log( 'Loading page: ' + path );
});

// vanilla JS
infScroll.on( 'request', function( path ) {...})

path String Requested page URL path

load

Triggered when the next page has been successfully loaded, but not yet added to the container.

// jQuery
$container.on( 'load.infiniteScroll', function( event, response, path ) {
  console.log( 'Loaded: ' + path );
});

// vanilla JS
infScroll.on( 'load', function( response, path ) {...});

response Document or String Response body of the loaded request. You can change the type of response with responseType

path String Loaded page URL path

var infScroll = $container.data('infiniteScroll');

$container.on( 'load.infiniteScroll', function( event, response, path ) {
  console.log( 'Loaded: ' + path,
    'Current page: ' + infScroll.pageIndex,
    infScroll.loadCount + ' pages loaded'
  );
});

append

Triggered after item elements have been appended to the container.

// jQuery
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
  console.log( 'Loaded: ' + path );
});

// vanilla JS
infScroll.on( 'append', function( response, path, items ) {...});

response Document or String Response body of the loaded request

path String Loaded page URL path

items NodeList Appended item elements

$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
  console.log( items.length + ' items appended' );
});

error

Triggered when the next page could not be loaded.

// jQuery
$container.on( 'error.infiniteScroll', function( event, error, path ) {
  console.log( 'Could not load: ' + path )
})

// vanilla JS
infScroll.on( 'error', function( error, path ) {...})

error Error or String

path String Requested page URL path

last

Triggered when the last page has been loaded.

Requires checkLastPage enabled, and path to be set to a next link.

// jQuery
$container.on( 'last.infiniteScroll', function( event, response, path ) {
  console.log( 'Loaded: ' + path );
});

// vanilla JS
infScroll.on( 'last', function( response, path ) {...});

response Document or String Response body of the loaded request

path String Loaded page URL path

history

Triggered when the history and URL have been changed.

// jQuery
$container.on( 'history.infiniteScroll', function( event, title, path ) {
  console.log( 'History changed to: ' + path );
});

// vanilla JS
infScroll.on( 'history', function( title, path ) {...});

title String Page title, if present

path String Page URL path