0

Working on infinite scroll with cdk-virtual-scroll-viewport and variable item height and At the end of list it will fetch next batch of data from api.

<cdk-virtual-scroll-viewport itemSize="400" (scrolledIndexChange)="onViewerScroll($event)>
     <div *cdkVirtualFor="let data of dataList ; let i = index">
      <app-card [data]="data"></app-card> // This is of variable height from min 100px to atleast 500px
    </div>
</cdk-virtual-scroll-viewport>

Due to variable height not able to trigger scrolledIndexChange properly. large space is visible at the end of list before new data is fetched.

Tried with autosize, list displays properly but its not triggers scrolledIndexChange which im using for fetching data.

<cdk-virtual-scroll-viewport autosize>

Is there any way I can resolve this issue.

Striker
  • 61
  • 1
  • 9

0 Answers0