Getting started
First make sure that Infinite Ajax Scroll is installed and included on every page where you need infinite scrolling functionality.
Definitions/concepts
Infinite Ajax Scroll works with a few concepts:
Container: This is an element in which child elements (items) will be appended. This is usually a
div, ul or table tag, but can be anything.Items: These are elements that live inside the container. This can be
div's, li's, article, table rows (tr) or anything else. Important is that the elements are a direct child of the container. Items for the next page will be inserted after the last item inside the container.Pagination: This is the element that contains your pagination links, like next and previous page. Infinite Ajax Scroll will automatically hide this element.
Next: this element (
a tag) is the link to the next page. The href is used to load the next page in the background and append the items.Markup
Given the above definitions, our minimal markup would be similar to this:
1
<div class="container">
2
<div class="item">...</div>
3
<div class="item">...</div>
4
<div class="item">...</div>
5
</div>
6
7
<div class="pagination">
8
<a href="page2.html" class="next">Next</a>
9
</div>
Copied!
Important to notice: every next page has to follow the same markup.
Javascript
Given the above markup, we need to instruct Infinite Ajax Scroll which element is what.
1
// import if you use the NPM package (not needed if you use CDN)
2
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
3
4
let ias = new InfiniteAjaxScroll('.container', {
5
item: '.item',
6
next: '.next',
7
pagination: '.pagination'
8
});
Copied!
This will enable infinite scroll in it's most basic form. When you scroll down, the next page is loaded through an ajax request and new items are appended to the container.
Last modified 7mo ago
Copy link