0

I have a list displayed with Angular CDK virtual scroll but using a custom scroll strategy to accommodate variable and changeable height.

The heights for each items are estimated using a constant size at first and then changed to actual height when resize observer for the items triggers. These heights are cached so that the total content size and items to show gets more and more correct the more items are rendered.

The problem is that while scrolled down such that items above are removed from DOM, on resize of window, the heights remembered become wrong. When user scrolls up, items will be re-added but the heights will be different. The total height will change and the offset will also change causing a jump on the items currently in view.

Here is a reproduction in Stackblitz

Followed this guide but changed a bit to allow for items being resized.

0