API

Methods

Methods are actions done by Infinite Scroll instances.

With jQuery, methods follow the jQuery UI pattern.

$container.infiniteScroll( 'methodName' /*, arguments */ )

let $container = $('.container').infiniteScroll({ /* options... */ })
  .infiniteScroll('loadNextPage');

Vanilla JavaScript methods look like:

infScroll.methodName( /* arguments */ )

Unlike jQuery methods, vanilla JS methods cannot be chained together.

// vanilla JS
let infScroll = new InfiniteScroll('.container', {
  // options...
});
infScroll.loadNextPage();

loadNextPage

Load the next page.

// jQuery
let promise = $container.infiniteScroll('loadNextPage')
// vanilla JS
let promise = infScroll.loadNextPage()

promise Promise

loadNextPage returns a Promise, allowing you to chain with .then(). The following .then() function is triggered after the page has loaded and after items have been appended.

// vanilla JS
infScroll.loadNextPage().then( function( loaded ) {
  // next page has been loaded
  let { response, body, items } = loaded;
  console.log( response.path );
  console.log( body );
  console.log( items );
} );

response Response response returned from fetch request

body Document, JSON, or String the operative content loaded from the fetch request.

items NodeList appended elements. Requires append

appendItems

Append items to the container.

appendItems will load <script/> within item elements. This is useful for loading embed scripts.

// jQuery
$container.infiniteScroll( 'appendItems', items )
// vanilla JS
infScroll.appendItems( items )

items jQuery object, NodeList, or Array of Elements

Use appendItems to manually append items on load.

let $container = $('.container').infiniteScroll({
  append: false, // disable automatic appending
});

$container.on( 'load.infiniteScroll', function( event, response ) {
  // get posts from response
  let $posts = $( response ).find('.post');
  // append posts after images loaded
  $posts.imagesLoaded( function() {
    $container.infiniteScroll( 'appendItems', $posts );
  });
});

getPath

Get relative URL path for the next page.

// jQuery
let path = $container.infiniteScroll('getPath')
// vanilla JS
let path = infScroll.getPath()

path String

let $container = $('.container').infiniteScroll({
  path: 'page/{{#}}',
  // options...
});

$container.infiniteScroll('getPath');
// => 'page/2'

getAbsolutePath

Get the absolute URL path for the next page.

// jQuery
let path = $container.infiniteScroll('getAbsolutePath')
// vanilla JS
let path = infScroll.getAbsolutePath()

path String

let $container = $('.container').infiniteScroll({
  path: 'page/{{#}}',
  // options...
});

// for example URL: https://example.com/section/news/
$container.infiniteScroll('getAbsolutePath');
// => '/section/news/page/2'

option

Set options after initialization.

// jQuery
$container.infiniteScroll( 'option', options )
// vanilla JS
infScroll.option( options )

options Object

let $container = $('.container').infiniteScroll({
  // initial options...
  // disable loading on scroll
  loadOnScroll: false,
});

// enable loadOnScroll on button click
$('.view-more-button').on( 'click', function() {
  $container.infiniteScroll( 'option', {
    loadOnScroll: true,
  });
});

destroy

Remove Infinite Scroll functionality completely.

// jQuery
$container.infiniteScroll('destroy')
// vanilla JS
infScroll.destroy()

Utilities

jQuery.fn.data('infiniteScroll')

Get the Infinite Scroll instance from a jQuery object. Infinite Scroll instances are useful to access Infinite Scroll properties.

let infScroll = $('.container').data('infiniteScroll');
// access Infinite Scroll properties
console.log(`Infinite scroll at page ${infScroll.pageIndex}`);

InfiniteScroll.data()

Get the Infinite Scroll instance via its element. InfiniteScroll.data() is useful for getting the Infinite Scroll instance in JavaScript, after it has been initalized in HTML.

let infScroll = InfiniteScroll.data( element )

element Element or Selector String

infScroll InfiniteScroll Infinite Scroll instance

<!-- init Infinite Scroll in HTML -->
<div class="container" data-infinite-scroll='{...}'>...</div>

// using a selector string
let infScroll = InfiniteScroll.data('.container')

// jQuery with element
// pass in the element, $element[0], not the jQuery object
let infScroll = InfiniteScroll.data( $('.container')[0] )

// vanilla JS with element
let container = document.querySelector('.container')
let infScroll = InfiniteScroll.data( container )

Properties

// init Flickity with jQuery
let $container = $('.container').infiniteScroll({...});
// get instance
let infScroll = $container.data('infiniteScroll');
// access properties
console.log( infScroll.pageIndex );

pageIndex

The number of the current loaded page. pageIndex increments by 1 on each load.

infScroll.pageIndex
// => 1

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

$container.on( 'load.infiniteScroll', function() {
  $demoStatus.text(`Loaded page: `${infScroll.pageIndex}`);
});

Infinite Scroll will determine the initial pageIndex on initialization. If path is set to a next link element, Infinite Scroll will determine pageIndex from the link's href value.

<a class="pagination__next" href="/page/4">Next</a>

path: '.pagination__next',
// next page is 4, pageIndex = 3

If path is set to a string with {{#}}, Infinite Scroll will determine pageIndex from the window URL.

// URL: https://example.com/blog/9.html
path: '/blog/{{#}}.html',
// pageIndex = 9

Otherwise, initial pageIndex defaults to 1.

loadCount

The number of pages loaded. loadCount increments by 1 on each load.

infScroll.loadCount
// => 0

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

$container.on( 'load.infiniteScroll', function() {
  $demoStatus.text( infScroll.loadCount +
    'pages loaded' );
});