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, fetchPromise ) {
  console.log(`Loading page: ${path}`);
});

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

path String Requested page URL path

fetchPromise Promise Promise that resolves to a Response object returned by the fetch request

load

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

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

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

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

path String Loaded page URL path

response Response Response to the fetch request

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

$container.on( 'load.infiniteScroll', function( event, body, path, response ) {
  console.log(`Loaded: ${path}`,
    `Status: ${response.status}`,
    `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, body, path, items, response ) {
  console.log(`Appended ${items.length} items on ${path}`);
});

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

body Document Response document of the loaded request

path String Loaded page URL path

items NodeList Appended item elements

response Response Response to the fetch request

error

Triggered when the next page could not be loaded.

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

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

error Error or String

path String Requested page URL path

response Response Response to the fetch request

last

Triggered when the last page has been loaded. last is triggered with several conditions.

• Anytime the loaded page returns with 204 status.
• With append set, if the loaded page has 0 items to append.
• With path to be set to a next link and checkLastPage enabled, if the next link is not found on the loaded page.
• With checkLastPage set to a selector string, if the selector is not found on the loaded page.
• With path set to a function and checkLastPage enabled, if the next link is not found on the loaded page.

// jQuery
$container.on( 'last.infiniteScroll', function( event, body, path ) {
  console.log(`Last page hit on ${path}`);
});

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

body Document, JSON, 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