Ion-infinite-scroll scrolls to top of page with VirtualScroll

Ionic Framework ionic-v3
1

Hi All,

I have an implementation of ion-infinite-scroll, which works fine, and I am loading the next page of data. However, for some reason once it loads the next data, it scrolls to the top of the page, instead of remaining in the same place.

I have been scratching my head. Any ideas why it does not retain its scroll position as expected?

Here is my code:

html

 .
 .
 .
  </ion-list>

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

</ion-content>

ts

  doInfinite(infiniteScroll: any) {
    this.firstResult += this.MAX_RESULTS;
    this.employeeService.getEmployeeRange(this.firstResult, this.MAX_RESULTS).then((employeeModels: Employee[]) => {
      for (var index = 0; index < employeeModels.length; index++) {
        this.employeeModels.push(employeeModels[index]);
      }
      infiniteScroll.complete();
    });
  }

entire html

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Search</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="search" id="search-content">

  <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Search">
      </label>

  <ion-list [virtualScroll]="employeeModels">
    <ion-item-sliding *virtualItem="let item">
      <ion-item>
        {{ formatEmployee(item) }}
        <ion-avatar item-left><img [src]="item.avatar64 ? item.avatar64 : 'images/blank-profile-picture.png'"></ion-avatar>
        <h2>{{item.firstName}}</h2>
        <p>{{item.categories[0].name}}&nbsp;{{item.subCategories[0].name}}&nbsp;{{item.time}}</p>
      </ion-item>

      <ion-item-options>
        <button primary (click)="alert('todo')"><ion-icon name="text"></ion-icon>Message</button>
        <button light (click)="alert('todo')"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>

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

</ion-content>
2

Looks like this is a bug with Ionic and InfinteScroll & VirtualScroll don’t work well together…