This component allows you to add infinite scrolling to Repeaters, Easy Posts & Products List components with pagination. The posts are pulled dynamically from the next page, saving users the need to navigate to a new page.
Loading animations can be styled and customised to fit the style of your site and both scrolling or clicking any element to load the next posts are supported.
New – custom setting has been added for use outside of these built in queries. See below.
View Live Preview
Note – in Oxygen pagination is added to components either when using default queries or manual queries when on archive pages or the main posts page, not when using custom queries. If there are posts available on the next page, this will activate pagination & will ensure the infinite scroller will fetch the posts.
How to use the Infinite Scroller component
The component containing the loop (either Easy Posts, Repeater or Products List) will need to placed inside of the infinite scroller component.
The process of setting up the query and building the post loops is unchanged, the only difference is that the pagination will not be there while the element is inside the infinite scroller. To control the behaviour of the infinite scroll, the settings are all found in the Primary tab of the infinite scroller component and are as follows..
Trigger to Load More
There are two modes, either scrolling will trigger the new posts to load, or clicking on an element.
If choosing click element then you just need to add the selector for the element. For eg you could add a button underneath the infinite scroller component, with a class
load-more. Now when users click that button, if there are more posts to load they will. If there isn’t the button will be removed. Any element can be used as the click trigger.
If choosing scroll down then you have the option to choose the scroll threshold (to control how many px away from the end of the posts the user needs to scroll) and also the scroll element.
By default this is the entire page, this is the most common situation where the user scrolls down the page to the point where the last posts are. You also have the option to choose ‘this element’ or ‘a container’ element. These options are useful if you don’t want the page height to change when the posts load, instead the element itself (or a container element of your choosing) would act as a scroll container. Note that you will need to set a height on the scroll container and set the overflow to scroll. This way when the user scrolls through the posts, they aren’t scrolling the actual page they are scrolling this element to reveal the new posts.
Change URL and Browser History
Choose whether the URL changes in the browser and to control the behavior of the browser when the user clicks the back button.
- Disabled – Ensures the URL isn’t changed at all as new posts are loaded.
- Push – The URL is changed as new posts are loaded to show pagination. These pages are pushed into the browser history. This means that if the user was to click back in the browser after scrolling to page 4, it would take them to page 3 and then page 2, etc.
- Replace – The URL is changed as new posts are loaded to show pagination. These pages just replace the most recent entry in the browser history. This means that if the user was to click back in the browser after scrolling to page 4, they would not go back to page 3. Instead, they would go to the page they were on before they landed on the page with the infinite scroll.
No content text
Here you can set text to appear after the last posts have loaded. Something like ‘No more content to load.’ This is turned off by default.
This is the animation that will display as the new posts are being fetched from the next page. There are a number of presets to choose from that can be styled and positioned. This is on by default and is positioned relative to the infinite scroller. The ‘animation preview in builder’ provides a quick way to hide the animation while editing.
As with a few components, we’ve added a ‘custom’ setting to open up what you can do with the component and allow for more custom solutions.
With custom mode, the component can be used to follow ANY links on a page to get content from somewhere on another page, not just limited to the pagination links as is the case with the other options.
One common use case for this would be adding infinite scroll to a single post template where the user can scroll down after reading a post and the content from the next post will load directly underneath.
For convenience, we’ve added a ‘previous post’ option where the content will automatically be pulled from the previous post and then the second previous post and so on. But you can also set a link selector, meaning the component will follow any links if you wanted to manually add navigation links to the template. For eg if you’re using an adjacent posts component, you could use those links to determine the next post to load up.
The content selector setting is to set the container for the infinite scroller to look for on the next page. ‘.post-content’ is the default.