Javascript plugin for Infinite Scroll

 Javascript plugin for Infinite Scroll

Infinite Scroll is a JavaScript plugin that automatically adds the next page . Very Helpful plugin for improving the user experience.

Plugin Usage

Infinite Scroll plugin works on a container element with its child item elements

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

Plugin Options

<!-- wp:paragraph -->
<p>var infScroll = new InfiniteScroll( '.container', {<br>// defaults listed</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>path: undefined,<br>// REQUIRED. Determines the URL for the next page<br>// Set to selector string to use the href of the next page's link<br>// path: '.pagination__next'<br>// Or set with {{#}} in place of the page number in the url<br>// path: '/blog/page/{{#}}'<br>// or set with function<br>// path: function() {<br>// return return '/articles/P' + ( ( this.loadCount + 1 ) * 10 );<br>// }</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>append: undefined,<br>// REQUIRED for appending content<br>// Appends selected elements from loaded page to the container</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>checkLastPage: true,<br>// Checks if page has path selector element<br>// Set to string if path is not set as selector string:<br>// checkLastPage: '.pagination__next'</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>prefill: false,<br>// Loads and appends pages on intialization until scroll requirement is met.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>responseType: 'document',<br>// Sets the type of response returned by the page request.<br>// Set to 'text' to return flat text for loading JSON.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>outlayer: false,<br>// Integrates Masonry, Isotope or Packery<br>// Appended items will be added to the layout</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>scrollThreshold: 400,<br>// Sets the distance between the viewport to scroll area<br>// for scrollThreshold event to be triggered.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>elementScroll: false,<br>// Sets scroller to an element for overflow element scrolling</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>loadOnScroll: true,<br>// Loads next page when scroll crosses over scrollThreshold</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>history: 'replace',<br>// Changes the browser history and URL.<br>// Set to 'push' to use history.pushState()<br>// to create new history entries for each page change.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>historyTitle: true,<br>// Updates the window title. Requires history enabled.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>hideNav: undefined,<br>// Hides navigation element</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>status: undefined,<br>// Displays status elements indicating state of page loading:<br>// .infinite-scroll-request, .infinite-scroll-load, .infinite-scroll-error<br>// status: '.page-load-status'</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>button: undefined,<br>// Enables a button to load pages on click<br>// button: '.load-next-button'</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>onInit: undefined,<br>// called on initialization<br>// useful for binding events on init<br>// onInit: function() {<br>// this.on( 'append', function() {…})<br>// }</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>debug: false,<br>// Logs events and state changes to the console.<br>})</p>
<!-- /wp:paragraph -->