Shopify endless scroll plugin
- 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
You can either use NPM to add the plugin to your project, or manually add and the configure the code as necessary
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
});
});
Last modified 2yr ago