content: Incorrect code example for Usage with Virtual Scroll​

[aditbisa]

URL

https://ionicframework.com/docs/api/infinite-scroll#usage-with-virtual-scroll

Issue Description

Rather than:

<ion-content scroll-y="false">
  <virtual-scroll-element class="ion-content-scroll-host">
    <!-- Your virtual scroll content -->
  </virtual-scroll-element>
  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

it should be like this:

<ion-content scroll-y="false">
  <virtual-scroll-element class="ion-content-scroll-host">
    <!-- Your virtual scroll content -->
    <ion-infinite-scroll>
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </virtual-scroll-element>
</ion-content>

[averyjohnston]

Thank you for the report. Can you elaborate on the problem you're running into with the current code?

[aditbisa]

Thank you for the report. Can you elaborate on the problem you're running into with the current code?

The ion-infinite-scroll will look for the nearest content host (either .ion-content-scroll-host or ion-content) to bind the scroll events. The codes in the docs will not be able to find the .ion-content-scroll-host as expected as it is a sibling node, not its parents.

I tried the codes in the docs and confused for many days on why it doesn't work as described. Until I actually need it and decide to look at the source code.

• https://github.com/ionic-team/ionic-framework/blob/521063bf241dc2c55bcd02a92ed8a418cfec6b1e/core/src/components/infinite-scroll/infinite-scroll.tsx#L80
• https://github.com/ionic-team/ionic-framework/blob/545f0a9309bb453a78708bb382124ab285c041a2/core/src/utils/content/index.ts#L57

[mapsandapps]

Thanks for reporting this issue! We're going to take a closer look at this use case of sibling virtual scroll to the infinite scroll component.