angular cdk-virtual-scroll-viewport after image load, scroll direction shows incorrect white space due to incorrect element height

Asked Sep 14 '18 at 05:17

Active Sep 15 '18 at 10:41

Viewed 840 times

when using the angular cdk-virtual-scroll as per below code, content displays correctly before image loaded. however, after the image is loaded, scrolling seems to work incorrectly.

in this case, scroll direction is vertical. as scrolling occurs, extra white space is added to the bottom of the parent viewport.

I would speculate that the scroll element determined child sizes before image load and therefore the height of each child does not match actual child height after image load.

question is what are my options to work around this problem, please.

<cdk-virtual-scroll-viewport sytle="height: 500px" autosize>

<div *cdkVirtualFor="let item of items | async">

<img *ngIf="item.source" src={{item.source}}>
<div>
{{item.text}}
</div>

</div>

</cdk-virtual-scroll-viewport>

edited Sep 15 '18 at 10:41

asked Sep 14 '18 at 05:17

Michael Zhou

`autosize` strategy is not released yet. You can use it from the cdk-experimental library and it works well with images as well. – Liu Zhang Oct 25 '18 at 15:39
@blackiii so what do you suggest the issue would be coming from? – Michael Zhou Nov 11 '18 at 15:30
wrong implementation I think. :) – Liu Zhang Nov 11 '18 at 15:47
as in my implementation or the cdk-experimental library? – Michael Zhou Nov 11 '18 at 15:59

angular cdk-virtual-scroll-viewport after image load, scroll direction shows incorrect white space due to incorrect element height

0 Answers0