Scrollery

A modern infinite scrolling library

Features

• Leverages Intersection Observer API for performance
• No dependencies
• Lightweight
• Event handlers for custom Scrollery events
• Supports JSON and text/html response types

Installation

CDN:

<script src="https://unpkg.com/scrollery@1.2.0/dist/scrollery.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/scrollery@1.2.0/dist/scrollery.js"></script>

NPM:

$ npm install scrollery

Usage

HTML

<!-- Container -->
<ul id="product-grid">
  <li class="product-card">...</li>
  <li class="product-card">...</li>
  <li class="product-card">...</li>
  <!-- Adds next page content here -->
</ul>

Initialize Scrollery

const scrollery = Scrollery.create('#product-grid', {
  path: 'page',
  content: '.product-card'
});

OR

const productGridElement = document.querySelector('#product-grid');
const scrollery = Scrollery.create(productGridElement, {
  path: 'page',
  content: '.product-card'
});

Config

Property	Type	Default	Description
path (required)	string | function	""	Determines the URL for the next page of content. The string value should be a the key of a search parameter. This will be used to determine the next URL to fetch content from. A function that returns the URL for the next page content can also be used. If "page" was passed as the value for path; scrollery will start fetching from .../?page=2. The value will automatically increment for the next page.
content (required)	string	""	Selector to query the content from next page and append to container element.
root	Element	null	Element used as the viewport for checking visibility of the target. 1
rootMargin	string	"200px"	Margin around the root. 1
threshold	number | number[]	0	Number or an array of numbers which indicate at what percentage of the spinner's visibility to load more content. 1
fetchOptions	Object	{}	Options to apply for fetch request. 2
responseType	"text" | "json"	"text"	The type of response being returned from the server. If set to json, provide an event handler for the load.json event to populate data on a template. An example is given below.
showSpinner	boolean	false	Shows a spinner while waiting to load the content from the next page.

Events

Event	Description
load	Triggered when the next content page has successfully fetched, but not inserted into DOM.
load.json	Triggered when the data returned from the next page is JSON.
insert	Triggered when the desired content is inserted into the DOM.
last	Triggered when there is no more content to fetch.

// Attach an event handler for the load event
scrollery.on('load', () => {
  console.log('Load event occured');
});

// Remove event handler for load event
scrollery.off('load');

Example for JSON response

Markup needs to be created and appended to the Scrollery container as shape of data will differ depending on the content. A templating library can help with this or the Document object.

/**
 * data is a JavaScript object that is the result of
 * parsing the response body
 **/
scrollery.on('load.json', (data) => {
  // Populate template with data
  const html = template.compile(data);
  // Append HTML to container
  scrollery.insertContentElements(html);
});

Browser support

Scrollery supports Chrome 51+, Edge 15+, Firefox 55+, Safari 12.1+. Internet Explorer is NOT supported.