9

Especially obvious at the mobile.it will refresh immediately whenever the user scrolls, if user is scrolling quickly, it is hard to render?

rorry
  • 111
  • 1
  • 3
  • 2
    Hey there! Welcome to StackOverflow! Your question is incomplete and has little chances to get answered as is. Please read the **[How-To-Ask](https://stackoverflow.com/help/how-to-ask)** article & edit your question adding more information. – iamdanchiv Dec 13 '18 at 12:05

4 Answers4

8

you can reduce the itemSize to a lower number which should trick the scroller into rendering more rows above/below the current viewable area.

this should allow you to scroll faster but it will also take more cpu to run.

for ex: change this <cdk-virtual-scroll-viewport itemSize="50"> to this <cdk-virtual-scroll-viewport itemSize="10">

Arron McCrory
  • 690
  • 7
  • 15
2

You can use minBufferPx and maxBufferPx to reduce the blank space, as it's name indicates, you can buffer the list so user will see less blank space, for example you display 5 items (50px height for each) at a time, you can set minBufferPx to 250px (5 items) and maxBufferPx to 500px (10 items), when user scrolling and less then 5 items (240px) are buffered, it will load another 6 items (>500px). The downside of this is it consume more CPU.

ExploreEv
  • 725
  • 8
  • 8
0

I had some similar issue and came across these:

https://github.com/angular/components/issues/24943

https://github.com/angular/components/issues/20971

There is also a stackblitz linked in the second issue with the following hacky fix outside the cdk-virtual-scroll-viewport:

<div style="position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none"></div>
vkvkvk
  • 129
  • 1
  • 7
0

Try using templateCacheSize: 30 in *cdkVirtualFor. try any greater value if not working.

Kaleem Ullah
  • 36
  • 6