How to implement the pull to refresh in CDK virtual scrolled angular application

Question

Currently I am using CDK virtual scroll in the DOM, but when scrolling fast there is glitch happening in the DOM , so I am planning to implement the Pull to refresh method, so how to implement this pull to refresh or any other solution for this glitch issue

Answer 1

ionic supports this behaviour with its ion-refresher component

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

You could either use this component or look into their repo as to how they implement it

Answer 2

If you see a glitch when scrolling fast with CdkVirtualScroll, it usually means that the itemSize on your cdk-virtual-scroll-viewport is not correct.

If it's off by a few pixels it won't matter that much if you scroll slowly, but if you scroll quickly then CdkVirtualScroll will run into trouble because the difference between itemHeight and the actual item height becomes too large for it to calculate correctly which items to show.

Go to your browser dev tools and measure the exact height of your items. The height should be fixed.

Let's assume you measured an item height of 50px. Then, in your template:

<cdk-virtual-scroll-viewport itemSize="50">