Infinite Scroll New! v4

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.

The original version of Infinite Scroll was first released by Paul Irish 2008. It was a break-through work of front-end development, granting web developers a cutting edge experience via a user-friendly yet powerful jQuery plugin. That lineage scrolls on to this day.

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@4/dist/infinite-scroll.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/infinite-scroll@4/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.

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

// element argument can be a selector string
//   for an individual element
let 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