Ionic 2 beta 11 virtual scroll and infinite scroll autoscrolls up after update

[theromis]

Trying to build contact list with about 10k nodes, my assumption was to combine virtualScroll and infinite-scroll controller, so my page is like below:

<ion-content>
      <ion-list [virtualScroll]="contacts">
        <ion-item *virtualItem="let contact">
....
        </ion-item>
      </ion-list>

      <ion-infinite-scroll (ionInfinite)="doInfiniteInvitation($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
</ion-content>

and .ts controller

  doInfiniteInvitation(infiniteScroll) {
    console.log('doInfiniteInvitation');
    this.contactsService.contact_invitations()
    .then(contacts => {
      for (var i = 0; i < contacts.length; i++) {
        this.contacts.push(contacts[i]);
      }

      infiniteScroll.complete();
      console.log('doInfiniteInvitation done');
    });
  }

so after every doInfiniteInvitation call it resets to the top position, is it possible somehow avoid this "feature"?
may be [virtualTrackBy]="virtualTrack" can help with that?

[numerized]

Yes I confirm, it's a bug inherited from ionic1 by the way. I've not had time to log it . In my infinite scrolls when I load a video from the (ionInfinite)="doInfinite($event)" the ion-content goes back up automatically when video is finished and comes back to the view.

thanks @theromis !!!
thanks Ionic.

[theromis]

any plans to fix that?
or, may be, somebody can point me to the place and I'll try to fix it by myself?

[lujakob]

Hi,
I am working on similar things and might have a workaround for you:
First of all, I think this is caused by node_modules/ionic-angular/components/virtual-scroll/virtual-scroll.js line 111

self._elementRef.nativeElement.parentElement.scrollTop = 0;

So you either remove this line, or you could just scroll back to the position you want after completing the reload.
infiniteScroll.complete();
this.content.scrollTo(0, scrollHeight, 200); // scrollHeigh is your scroll position (integer value)
The duration of 200 ms (3rd parameter) might be important, because the rendering of the virtual items (that happens on scrolling) happens every chunk of milliseconds. (So you might end up with a white screen, with virtual items appearing only after a slight scroll)
If this doesn't work out, try delaying this in a setTimout (100-200ms)
setTimeout(()=>{ this.content.scrollTo(0, scrollHeight, 200); }, 200);

You can play around with those values.

Just tried the first solution by removing the scrollTop line, it does not show data until you change scroll position. And as for 2nd solution how can we get the scroll position before loading as in variable scrollHeight?

[lujakob]

yeah correct.
first solution:
I found that whenever data is loaded, processRecords in virtual-util.js starts the first item with top:0. So currently it's not possible so easily to remove the scrollToTop after reloading (I spent hours on this).

As a workaround you could try 2nd solution:

I guess it only shows scroll items after loading when you scroll down a bit ? (if you scroll up it doesn't show)
That's because of another gotcha: after loading, only when scrolling down the content the virtual-scroll data is visible, because the VS component does the processRecords only on scrolling down. If you remove
if (data.scrollDiff > 0) {
in line 163 of node_modules/ionic-angular/components/virtual-scroll/virtual-scroll.js the processRecords is called on scrolling up and down.

To get the scroll position:
if you check the source node_modules/ionic-angular/components/content/content.d.ts you'll find
getScrollTop()

We need to made some more changes just removing if(data.scrollDiff > 0){ is not gonna work, after scrolling down 4 or 5 times items does not even load until scrolling upwards. and anyways its still not showing items until we scroll up or down.
And thanks for the help i will give it another go do share if you find anything else.

And i think this line has nothing to do with items not showing until you scroll down a bit after loading is done with infinite scroll. do share your thoughts on that.

Just found the solution so it appears if(data.scrollDiff>0) has nothing to do with this problem. I guess problem was that processRecords was not being called when infinite scroll completes loading the data and when we scrolled up and down a bit updateScroll was called which than calls processRecords and we were able to see them.

Solution:
First remove
self._cells.length = 0; self._nodes.length = 0; self._itmTmp.viewContainer.clear(); self._elementRef.nativeElement.parentElement.scrollTop = 0;
and put
var data = this._data; var stopAtHeight = (data.scrollTop + data.renderHeight); virtual_util_1.processRecords(stopAtHeight, this._records, this._cells, this._hdrFn, this._ftrFn, data);

there as it was being done in updateScroll. It seems to work perfectly when i have used VirtualScroll+InfiniteScroll+PullToRefresh altogether.

Now just need someone to test it on android, and someone who can test its performance.

Thank you so much @lujakob you have been a massive help.

[rodrigopagnuzzi]

@azzamasghar I've tried your solution and unfortunately the perfomance on scrolling is really bad

Yeah its not feasible i am also stuck here.