Infinite Scroll v3

Infinite Scroll is a JavaScript plugin that automatically adds the next page, saving users from a full page load. You’ve likely seen it in use all over the web.

Install

Download

• infinite-scroll.pkgd.min.js minified, or
• infinite-scroll.pkgd.js un-minified

CDN

Link directly to Infinite Scroll files on unpkg.

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>

Package managers

Install with npm: npm install infinite-scroll

Install with Yarn: yarn add infinite-scroll

Install with Bower: bower install infinite-scroll --save

License

Commercial license

If you want to use Infinite Scroll to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Infinite Scroll commercial licensing.

Once purchased, you’ll receive a commercial license PDF and be all set to use Infinite Scroll in your commercial applications.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Infinite Scroll under the terms of the GPLv3. Read more about Infinite Scroll open source licensing.

Getting started

Include the Infinite Scroll .js file in your site.

<script src="/path/to/infinite-scroll.pkgd.min.js"></script>

Infinite Scroll works on a container element with item elements.

<div class="container">
  <article class="post">...</article>
  <article class="post">...</article>
  <article class="post">...</article>
  ...
</div>

There are several ways to initialize Infinite Scroll.

Initialize with jQuery

You can use Infinite Scroll as a jQuery plugin: $('selector').infiniteScroll().

$('.container').infiniteScroll({
  // options
  path: '.pagination__next',
  append: '.post',
  history: false,
});

Initialize with vanilla JavaScript

You can use Infinite Scroll with vanilla JS: new InfiniteScroll( elem ). The InfiniteScroll() constructor accepts two arguments: the container element and an options object.

var elem = document.querySelector('.container');
var infScroll = new InfiniteScroll( elem, {
  // options
  path: '.pagination__next',
  append: '.post',
  history: false,
});

// element argument can be a selector string
//   for an individual element
var infScroll = new InfiniteScroll( '.container', {
  // options
});

Initialize with HTML

You can initialize Infinite Scroll in HTML, without writing any JavaScript. Add data-infinite-scroll attribute to the carousel element. Options can be set in its value.

<div class="container"
  data-infinite-scroll='{ "path": ".pagination__next", "append": ".post", "history": false }'>

Next

• Options
• API

Features

Versatile UI

Rather load with a button than use scrolling? Got it. What about scrolling a couple pages, then using a button? Got that. Or load with your own specific logic? Yup.

1a

1b

1c

1d

End of content

No more pages to load

View more

Edit this demo or vanilla JS demo on CodePen

Masonry, Isotope, & Packery

Masonry, Isotope, & Packery layouts plug right into Infinite Scroll. These features combine to create a rich visual grid for wandering eyes.

End of content

No more pages to load

Edit this demo or vanilla JS demo on CodePen