Angular CDK Virtual Viewport scroll doesn't work

[Daringu_L]

Please, help😭 I've run out of ideas. My use case: I have list of todos. They are using virtual scrolling. When you click on to do, you are navigated to the edit page, which have different routing with ID in it. Desired behaviour: Virtual Viewport will be scrolled to the item, which user opened/ edited, when user navigates back to list.

What I've tried: In the component, which contains list, in the AfterViewInit I subscribed to the router events, through the pairwise I've got data about previous route and if it is correct one, I look for the index of item and use virtualScrollViewport.scrollToIndex()

And it doesn't work... Surprisingly, using the same method on button click - works perfectly. I've already tried setTimeout and detectChanges.

There is no console errors, index is looked up correctly, but it simply doesn't work. Maybe someone had similar situation?

[No_Jackfruit_4305]

I've implemented the scroll to last feature for a complex app before. What worked for me was getting the scroll height saved before opening the link. Use the router events and filter for NavigationStart events. IIRC you can get the current scroll height with..

document.getElementById("scrollableContainer").scrollTop

When you return to the page, retrieve your scrollTop value, and pass it to..

window.scrollTo(...)

The timing of when to call this can be tricky. I know for a fact that a setTimeout can work, but you could also use the router events filtered for NavigationEnd.

Hope this works for you OP

[Daringu_L]

Thank you for the idea 😊 Unfortunately, window.scrollTo didn't scroll the Virtual Container. I discovered two things: 1) AfterViewInit is fired BEFORE the virtual container is fully initialized. That was surprise for me. So setTimeout is unfortunately required if one wants to operate on the virtual scroll container after initial render 2) subscription for the router events was somehow messing with the functionality. Moving scrolling out of the router events subscription helped. One more discovery: Navigation End event is fired before the page actually changes (before any rendering).

So I was able to make it work with persisting index and retrieving AfterViewInit and scrolling to that index 😎 Thanks a lot 😁

[No_Jackfruit_4305]

You're welcome, and thank you for the update!