feat: improve component compatibility with virtual scrolling solutions

[liamdebeasi]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

At the moment, components such as ion-refresher, ion-infinite-scroll, and the collapsible large title rely on users scrolling on ion-content. As a result, when scrolling in a virtual scroll container, these components do not work as expected. While we cannot account for every single virtual scrolling solution, I think we can expose an API that lets users have more control over which scrollable container these components listen on.

This impacts solutions like CDK Scroller, Virtuoso, vue-virtual-scroller, etc.

For developers that would like to see this feature added to the Framework, please react to this post with a thumbsup/"+1" reaction. Thanks!

[ghenry22]

It would be great if you could also validate that ion-reorder works with these alternative scrollers. It is currently broken when used with ion-virtual-scroll but the bug reporting this was closed "because virtual-scroll will be deprecated".

[julianpoy]

Ever since 5.4.2 ngx-virtual-scroller has extreme jumping issues on IOS and is completely unusable past that version.

[liamdebeasi]

@julianpoy Could you please open a separate issue with a code reproduction?

[julianpoy]

@liamdebeasi

#24120

[mikkimichaelis]

I am using the following code which incorporates ion-virtual-scroll and ion-infinite-scroll. Yes it has some minor issues I can live with but otherwise things seem to work fine. I found this thread from a console log regarding ion-virtual-scroll deprecation. Is the OP stating that ion-virtual-scroll and ion-infinite-scroll do not work together?

All of this seems very strange to me. How can a framework such as Ionic, in todays world of infinite data, not have a virtual infinite scroll solution? Is this just another way to push Ionic developers toward Ionic Paid?

@ionic/angular": "^5.8.4",
@angular/core": "~11.2.0",

<ion-content fullscreen="true">
  <ion-refresher slot="fixed" [pullFactor]="this.settingsService.environment.ionRefresher.pullFactor" [pullMin]="this.settingsService.environment.ionRefresher.pullMin" [pullMax]="this.settingsService.environment.ionRefresher.pullMax" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>
  <ion-list>
    <ion-virtual-scroll [items]="dataService.searchMeetings$ | async">
      <ng-container *virtualItem="let meeting">
        <meeting-listing [meeting]="meeting"></meeting-listing>
      </ng-container>
    </ion-virtual-scroll>
  </ion-list>
  <ion-infinite-scroll [threshold]="threshold" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more meetings...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

[liamdebeasi]

@mikkimichaelis As mentioned in the deprecation warning, the virtual scrolling recommendation is to use Angular's own virtual scrolling component. We do have a recommendation for virtual scrolling, but it is provided by the developer of the JavaScript Framework you are using.

We are not rolling out a paid solution for infinite scrolling. Instead, we are looking to improve compatibility of our existing free components with virtual scrolling solutions.

I would also like to note that ion-virtual-scroll works with ion-infinite-scroll and you do not need to migrate off ion-virtual-scroll in order to use Ionic 6. If you would prefer to wait until we have made improvements to our component's compatibility with Angular's virtual scroll component, you should not run into any errors in doing so.

---

We have a pretty good idea of the areas that we need to improve upon for virtual scrolling, and given the number of +1 reactions it seems that this would be a welcome improvement. I am going to bump this up in priority and am going to lock this issue for now.

I will follow up when I have more to share.