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

Getting started

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

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:
1
document.addEventListener("DOMContentLoaded", function() {
2
var endlessScroll = new Ajaxinate({
3
container: '#AjaxinateContainer',
4
pagination: '#AjaxinatePagination',
5
method: 'click',
6
offset: 1000
7
});
8
});
Copied!

Methods

Last modified 5mo ago