14

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?

Sampath
  • 63,341
  • 64
  • 307
  • 441
dragonmnl
  • 14,578
  • 33
  • 84
  • 129

1 Answers1

20

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)

enter image description here

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

Sampath
  • 63,341
  • 64
  • 307
  • 441
  • 1
    +1 but still I want to know what is better to use, I am using infinite scroll and it is working very good on the android build but on ios, it is very slow. even the ion list items are loading very slow I am using ionic v3. let me know if you know anything about this – Sayed Mohd Ali Oct 18 '19 at 12:07
  • @SayedMohdAli why don't you use both? In my understanding, these two techniques are not mutually exclusive: on the contrary, they compliment each other. Virtual Scrolling is about how you deal with DOM, and Infinite Scrolling is about how you deal with client-server interaction. You can load data in chunks with Infinite Scrolling, and then render only a small portion of them which needs to be visible in DOM. – Alexey Grinko Feb 23 '23 at 13:06