Javatpoint Logo
Javatpoint Logo

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.



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:

Test it Now

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA