Ngx-infinite-scroll: 1millions data object, add on scrollDown and delete on top

[elvisbegovic]

I think the repo-team have to implement an example of millions rows object (virtual scroll) to simlpify us the utilisation because I don't know how implement something like :http://www.ok-soft-gmbh.com/jqGrid/99999VirtualScroll.htm it add data when scroll on bottom and delete on top, it seems it's very very speed, someone have an idea to realize this stuff ? thanks

[orizens]

hi @istiti
perhaps a solution of virtual scroll is suitable to this.
Currently, it is out of scope.
I have an intention of implementing such feature according to this article of google explaining the complexity of virtual scroll with infinite scroll

[elvisbegovic]

This is awesome, when do you think implement this must-have feature?

[elvisbegovic]

up, no idea?

I juste writed https://github.com/angular/angular/issues/10776#issuecomment-239738103 I think the only easy library that can do this in easy way is your so if interested by my request please enhance your plugin to show a lot data as facebook/twitter very very fast to the user :-D

thanks

[orizens]

hi @istiti
this is rather a quite complex implementation to add.
Currently, I can't estimate when it can happen.

[spierala]

Hi, @orizens,
I am using the infinite scroller for a paginated list and tried to implement virtual scrolling myself, just by limiting the items in the list to lets say 100 items.

So when scrolling down to the bottom and the end of the list is reached then the next 50 items are loaded from backend.
When there are more than 100 list items then I simple slice the array of listItems, so that only the last 100 items are shown in the list.

Now it looks like the infinite scroller is not triggering the scrolled Event anymore if the size of the list does not change anymore.

load 50 -> total 50
scroll down -> scrolled event -> load 50 -> total 100
scroll down -> scrolled event -> load 50 -> total 150 -> slice(50, 150) -> total 100
scroll down -> scrolled event not triggered anymore

I also tried to trigger the scroll down event by adding on additional item, which works:

load 50 -> total 50
scroll down -> scrolled event -> load 50 -> total 100
scroll down -> scrolled event -> load 50 -> total 150 -> slice(50, 150) -> total 100 -> add 1 more -> total 101
scroll down -> scrolled event is triggered

[orizens]

hi @spierala
ngx-infinite-scroll doesn't deal with virtual lists.
currently, the best strategy i came up with to determine whether to trigger a "scrolled" event is by calculating the height.
if you have any suggestions for a different/better strategy - feel free to share.

[blakeinate]

I have modified the method of triggering an event in a virtual list that @spierala presented to get a (somewhat) working solution to the virtual list problem.

addOne = false;

scrollDown() {
    const numOfNewItemsToGet = 50;
    const changedNum = this.addOne === true ? numOfNewItemsToGet + 1 : 
    numOfNewItemsToGet - 1;
    this.addOne = !this.addOne;
    if (this.lastIndex + 1 < this.items.length) {
      if (this.lastIndex + changedNum + 1 > this.items.length) {
        this.lastIndex = this.items.length - 1;
        this.firstIndex = this.lastIndex - 200;
      } else {
        this.lastIndex += changedNum;
        this.firstIndex +=  numOfNewItemsToGet;
      }
      this.displayedItems = this.items.slice(this.firstIndex, this.lastIndex + 1);
    }
  }

This alternates the virtual list between two lengths on each "scrolled" event, allowing the next event to be triggered.
I am interested if this solution works for anyone else.

[marie-dk]

I implementet ngx-infinite-scroll. I was absolutely sure that it would include a slicer to limit the number of items in the scroll area. I was certain that Google, Microsoft, Disney and other big companies, would not use it otherwise. But much to my surprice, it doesn't.

It makes ngx-infinite-scroll useless for datasets if they are indeed infinite. The amount of memory used by the DOM will quickly increase to an unacceptable level

I know it is not easy to implement, especially if the items are different in height. But it is a big showstopper for many. So a warning in the documentation would really save a lot of people time when deciding whether or not to implement ngx-infinite-scroll in their project.