Infinite scroll can be enabled by clicking the document icon on the left hand bar in the template builder. It is available for all content type templates. Meaning templates that are used for displaying articles etc.
The document button on the left side.
- Premium
You can use this setting to limit whether only premium or non-premium items should be fetched. Default is both.
- Article types
This will limit the items fetched by infinite scroll to content of the same type as the original item.
Limit section
This will limit the items fetched by infinite scroll to items that share the same section with the original item.
Limit tags
This will limit the items fetched by infinite scroll to items that share on or more the same tags with the original item.
For developers:
Turning on infinite scroll will in most cases cause issues with tracking and advertisement since it fundamentally changes how users accesses content. To mitigate this, you can add the following eventlisternes in either the header or the footer tags of the document.
//Fires whenever the user scrolls the the bottom, and a new page is inserted.
//Custom detail of the event will contain {"element":#tempalteref} Where template ref is the reference to the container of the part that was inserted
window.addEventListener("infinityDidInsertNewPage", (ev) => {
console.log(ev.detail)
});
//Fires whenever a page comes into view. Can fire multiple time for the same page if the users scrolls it into or out of view.
//Custom detail of the event will contain {"element":#tempalteref, path:"/path/to/page"} Where template ref is the reference to the container of the part that was inserted and path will contain a string with the path to the page where the article/content would normally be viewed.
window.addEventListener("infinityDidChangePage", (ev) => {
console.log(ev.detail)
});