# Infinite Scroll
## What is Infinite Scroll
The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page. This is what you see when you quickly scroll Facebook or Instagram feed, and the page loads new posts, while you see a loader spinning on the bottom of the screen
This is useful when you have huge amount of data, but you only fetch a small chunk at a time for a faster app experience, or saving data for users.
### Infinite Scroll in Ionic 4 Full App
The infinite scroll is located in `src/app/pages/addons/infinite`
To use this functionality, you put the `ion-infinite-scroll` at the bottom of `ion-content`in your page
```
```
`ion-infinite-scroll-content` contains the elements which will show when the page is loading new content. You can put text, images or GIFs here as per your app design.
### Importing
You can include infinite scroll functionality by importing it in your `page.ts`
```
import { IonInfiniteScroll } from '@ionic/angular';
```
and
```
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
```
### Loading more data
`(ionInfinite)="loadData($event)"` is basically an `ionInfinite` listener implemented, which fires on a scroll event when you reach the bottom of the page on scrolling. It then calls a function `loadData` (or any function you want), and you can implement the proper logic to fetch more data.
In Full App, we fetch more data from an API, with 5000ms delay
```
this.util.infiniteData().subscribe((data:Array) => {
data.forEach(element => {
this.loadedData.unshift(element)
});
event.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (this.loadedData.length > 30) {
this.util.presentToast('No more data available', true, 'bottom', 1500);
event.target.disabled = true;
}
})
```
`event.target.complete();` tells the app that the infinite scroll action (loading more data) is completed, and the loader can be hidden.
You should disable the Infinite Scroll functionality once all the data has been fetched. This will require a custom logic on your end. For demo purpose, we stop fetching more data when the list item count exceeds 30.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://enappd.gitbook.io/capacitor-full-app-ionic-angular/features/startup-features/addons/infinite-scroll.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.