What are differences and use cases for Virtual VS Infinite scroll in Ionic 3

Question

I've gone through Ionic 3 docs and I was trying to understand the difference between

https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

and

https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

I see they use different components and while they show an example of InfiniteScroll there is no example of VirtualScroll and it's set up also looks trickier.

What is difference between the two and what are possible use cases when to use one or the other?

Answer 1

Virtual Scroll

• We only create enough elements in the DOM to display the list data that is currently on screen, and we recycle those DOM elements to display new data as they scroll off the screen.
• This is done to improve performance when dealing with long lists.
• Example: you select 500 records to be displayed in a list, But Virtual Scroll will only insert a percentage of them into the DOM at a time which makes scrolling more fluid.

This diagram should help explain the concept: (by courtesy of josh article below)

Here you can see the example of Virtual Scroll

Infinite Scroll

• When you fetch a set number of records and insert them into a list, once you reach the bottom it'll fetch the next batch and insert them into the list and repeat that as long as you have items to fetch.
• Here you have more Instance Members than the Virtual Scroll. That means you have more control of this component.

Here is an example of Infinite Scroll

Refernces: Link 1 and Link 2