Mecha CMS

Mecha CMS blog and documentation.

Infinite Scroll Plugin

Updated: Sunday, 07 August 2016

Endless pages.

Table of Content

Image

Infinite scroll is a web design technique that prevents the browser scroll bar from scrolling to the bottom of the page, causing the page to grow with additional content instead.

This plugin requires you to determine four elements as the JavaScript target. The post, the posts container, the navigation container and the next navigation link. The default elements are:

  • .posts
  • .post
  • .blog-pager
  • a[rel="next"]

You can adjust them later based on the HTML markup of your shield.

<main class="posts">
  <article class="post"> … </article>
  <article class="post"> … </article>
  <article class="post"> … </article>
</main>
<nav class="blog-pager">
  <a rel="next"> … </a>
</nav>

Hooks

The available hooks are:

  • load
  • loading
  • loaded
  • error

Adding hooks:

infinite_scroll.on('load', function() {
    alert('Posts loaded.');
});

infinite_scroll.on('loading', function() {
    alert('Loading posts...');
});

infinite_scroll.on('loaded', function() {
    alert('No more posts to load.');
});

infinite_scroll.on('error', function() {
    alert('Error loading posts.');
});

Adding hooks with custom ID:

infinite_scroll.on('load', function() {
    alert('Posts loaded.');
}, 'test-id');

Removing hooks:

infinite_scroll.off('load'); // remove all `load` hooks data
infinite_scroll.off('load', 'test-id'); // remove `load` hook data with id `test-id`

Retrieving hooks:

console.log(infinite_scroll.on()); // retrieving all hooks data
console.log(infinite_scroll.on('load')); // retrieving all `load` hooks data

Download Latest Version

Donation and Email Subscription