Framework7 Infinite Scroll
The Infinite scroll is used when you want to load additional content and perform the required actions when the page is near to the bottom.
Syntax:
Here:
page-content infinite-scroll: It is used for infinite scroll container.
data-distance: This attribute is used to configure distance from the bottom of page (in px) to trigger infinite scroll event and its default value is 50px.
Add Infinite Scroll on the Top
You can also use infinite scroll on top the page, you just have to add additional “infinite-scroll-top” class to “page-content”.
Infinite Scroll Events
infinite: It is used to trigger when page scroll reaches specified distance to the bottom. It will be target by div class = “page-content infinite-scroll“.
There are two App’s methods that can be used with infinite scroll container:
To add infinite scroll event listener to the specified HTML container, use the following method:
You can remove the infinite scroll event listener from the specified HTML container by using the following method:
Here parameters are required options used as HTMLElement or string for infinite scroll container.
Framework7 Infinite Scroll Example
Let’s take an example to demonstrate the infinite scroll that loads the additional content when the page scroll is near to the bottom: