API

Methods

Methods are actions done by Infinite Scroll instances.

With jQuery, methods follow the jQuery UI pattern.

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

var $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
var infScroll = new InfiniteScroll('.container', {
  // options...
});
infScroll.loadNextPage();

loadNextPage

Load the next page.

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

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.

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

$container.on( 'load.infiniteScroll', function( event, response ) {
  // get posts from response
  var $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
var path = $container.infiniteScroll('getPath')
// vanilla JS
var path = infScroll.getPath()

path String

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

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

getAbsolutePath

Get the absolute URL path for the next page.

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

path String

var $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

var $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.

var 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.

var 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
var infScroll = InfiniteScroll.data('.container')

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

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

Properties

// init Flickity with jQuery
var $container = $('.container').infiniteScroll({...});
// get instance
var 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

var 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

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

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