Shopify endless scroll plugin

Features

• No dependencies

• Multiple methods; 'Endless scroll' automatically adds content as you scroll, whereas 'endless click' adds content on click

• Graceful fallback when JavaScript is not available

• Created for Shopify, but will work on any site

Demos

• Endless scroll demo ↗

• Endless click demo ↗

Getting started

You can either use NPM to add the plugin to your project, or manually add and the configure the code as necessary

Getting started

Settings

If you would like to change the names of the selectors, you can pass them in with the following settings:

Option	Default	Type	Description
container	#AjaxinateContainer	String	Selector to identify the container element you want to paginate
pagination	#AjaxinatePagination	String	Selector to identify the pagination element
method	scroll	String	Changes the method to 'endless click when set to' `click`
offset	0	Integer	The distance required to scroll before sending a request
loadingText	Loading	String	The text of the pagination link during a request
callback	null	Function	Function fired after the new page has been loaded

For example:

document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate({
    container: '#AjaxinateContainer',
    pagination: '#AjaxinatePagination',
    method: 'click',
    offset: 1000
  });
});

Methods

Methods