Ionic 6.1: Improved Virtual Scroll Compatibility

Ionic Framework 6.1 improves built-in feature compatibility for features such as fade header/footers, infinite scroll and item reordering with virtual scroll libraries. This allows applications to benefit from native designed features from Ionic with the performance of virtual scrolling.

With the .ion-content-scroll-host classname, implementations can specify which container is responsible for scrolling. Many custom features in Ionic make use of the scroll position and scroll listeners.

Below are a few usage examples for popular virtual scrolling libraries in React, Vue and Angular.

React (react-virtuoso)

const Footer = () => {
  return (
    <IonInfiniteScroll threshold="100px">
      <IonInfiniteScrollContent></IonInfiniteScrollContent>
    </IonInfiniteScroll>
  )
}

const Example = () => (
  <IonPage>
    <IonContent fullscreen scrollY={false}>
      <Virtuoso 
        className="ion-content-scroll-host"
        data={items}
        style={{ height: "100%" }}
        itemContent={(item) => <IonItem>{item}</IonItem>}
        components={{ Footer }} />
    </IonContent>
  </IonPage>
);

Vue (vue-virtual-scroller)

<template>
  <ion-page>
    <ion-content :fullscreen="true" :scroll-y="false">
      <RecycleScroller 
        class="ion-content-scroll-host scroller"
        :items="items"
        :item-size="50"
      >
      <template v-slot="{ item }">
        <ion-item>{{ item }}</ion-item>
      </template>
      <template #after>
        <ion-infinite-scroll threshold="100px">
          <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </template>
      </RecycleScroller>
    <ion-content>
  </ion-page>
</template>

<style scoped>
  .scroller {
    height: 100%;
  }
</style>

Angular (@angular/cdk/scrolling)

<ion-content [fullscreen]="true" [scrollY]="false">
  <cdk-virtual-scroll-viewport itemSize="50" class="ion-content-scroll-host">
    <ion-item *cdkVirtualFor="let item of items">
      {{ item }}
    </ion-item>
    <ion-infinite-scroll threshold="100px">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </cdk-virtual-scroll-viewport>
</ion-content>

We hope that you find value in this feature and others in the 6.1.0 release.