How to fit non-list items into virtual scroll using Angular Material CDK

Question

I am currently trying to understand the concepts of virtual scrolling and for that I extensively used the Angular documentation on Angular's CDK. I found out that they implemented virtual scrolling but they do not show how to implement a list on a page.

To give you a better understanding of my problem: Consider building a page of a collection of states. You have a big header section, then the list of states and at the end a footer with recommendations.

What I tried to do is to put all these 3 sections into the virtual scroll viewport in order to make the whole page scrollable and not only the list itself. And there is the problem. The scrolling does work as expected, but some items of the list get detached to early, so the header section sometimes bounces back in. This causes a pretty bad user experience and I wanted to know if my approach is somehow going into the right direction. I created a short demo of the problem on Stackblitz. I hope this might help understand the problem. When visiting the link, try and scroll the contents. You should notice that the Header section often reappears on the top because items get removed too soon.

I hope I could give you an idea on what the problem exactly is. It would be very nice if some of you could help me solve this issue or give me a hint on how to implement such behaviour better.

Have a great day & Thank you kindly in advance!

Answer 1

You want to read on this part of the docs. Long story shorty - you're providing items with different heights (header and footer) for the viewport, which is not supported - ALL items need to have the same height. And the mentioned autosize strategy in the @angular/cdk-experimental has lots of issues and is not being actively developed. It might work for your simple example though, so give it a try - but if you have some issues don't expect fixes coming your way.

Your best bet is to either create your own custom implementation of VirtualScrollStrategy that matches all your requirements or, if you feel you're not up to the task, use some custom library outside of the CDK. There are multiple different virtual scroll libraries that should work for you.

If you expect your use case to get more complicated over time, you might even consider implementing whole thing on your own from scratch. To give you an example - in my case it turned out that we need to support items of different sizes, that can change their size when user interacts with them and their size can't be determined until after they have been rendered and some events were fired, and some more tricky parts. Back then (2 years ago) no library would offer such functionality out of the box, and it was faster to actually write something from scratch to fit our exact requirements.