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');

jQuery chaining is broken by methods that return values like getPath.

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( 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: http://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

Properties are accessed only on Infinite Scroll instances. If you initialized Infinite Scroll with jQuery, use .data('infiniteScroll') to get the instance.

// 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 );
});

Loaded page: 1

1a
1b
1c
1d

End of content

No more pages to load

Edit this demo or vanilla JS demo on CodePen

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: http://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' );
});

0 pages loaded

1a
1b
1c
1d

End of content

No more pages to load

Edit this demo or vanilla JS demo on CodePen