CODEWITHSUNDEEP
angular-cdkvirtualscroll
rorry
rorry

Reputation: 141

cdk-virtual-scroll-viewport,Any way to solve the blank area when user is scrolling quickly?

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

Upvotes: 12

Views: 9598

Answers (5)

ab_qayyum
ab_qayyum

Reputation: 102

You can use scroll method and handle max-height. The white space is because of virtual scroll max-height and transform

<cdk-virtual-scroll-viewport (scroll)="removeSpaceOnScroll()" autosize>

removeSpaceOnScroll() {
this.cdkText = document.getElementById('infoTextForCDK')
let spacer = document.querySelector('.cdk-virtual-scroll-spacer')
let displyText = window.getComputedStyle(this.cdkText).opacity
if (displyText === "0.5") {
  this.getTranslateCDK = document.querySelector('.cdk-virtual-scroll-content-wrapper')
  let setMaxHeight = this.getTranslateCDK.style.transform.replace(/[^\d\.]*/g, '') * 1
  this.renderer.setStyle(spacer, 'max-height', `${setMaxHeight}px`);
} else {
  this.renderer.setStyle(spacer, 'max-height', 'unset')
}
}

Upvotes: 0

Kaleem Ullah
Kaleem Ullah

Reputation: 36

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

Upvotes: 0

vkvkvk
vkvkvk

Reputation: 159

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>

Upvotes: 1

ExploreEv
ExploreEv

Reputation: 895

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.

Upvotes: 2

Arron McCrory
Arron McCrory

Reputation: 728

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">

Upvotes: 7

Related Questions