Issue with RxVirtualScrollViewport: Position of Data(item) Changes on Navigation

[shiv8652]

Problem Description:
I'm encountering an issue with the rx-virtual-scroll-viewport package in my Angular application. Here's a simplified version of the relevant code:

<div rxVirtualScrollElement style="min-height: 100%">
    <!-- Content Before -->
    <div style="height: 300px; border: 1px solid red; margin-bottom: 10px; margin-top: 10px;" class="mr-x">
        Content Before Content Before Content Before
    </div>
    <div style="position: relative;" class="mr-x">
        <rx-virtual-scroll-viewport (scrolledIndexChange)="rxaScrolledIndex$.next($event)" autosize
            [resizeObserverConfig]="{  extractSize: extractSize }" [runwayItemsOpposite]="runwayItemsOpposite"
            [runwayItems]="runwayItems" class="viewport">
            <div class="item" *rxVirtualFor="let item of data$; let index$ = index$; let i = index;
                trackBy: trackItem; renderCallback: rendered; strategy: $any(strategy$)"
                class="item" (click)="GoToDetails(item,index$,i);">
                <div class="content">
                    <p style="font-weight: 700;"><span>{{ i}}. </span><span>{{ item.title }}</span></p>
                    <p>{{item.info}}</p>
                </div>
            </div>
        </rx-virtual-scroll-viewport>
    </div>
</div>

Problem Details:

• I have a list of data(item), upon clicking on an item from the list, the application navigates to a detail page.
• When returning to the list page, the position of the data within the rx-virtual-scroll-viewport changes.
• Similarly, navigating between (two) tabs leads to the same issue of data position changing.

Requested Assistance:
I'm seeking guidance on how to maintain the position of the data within the rx-virtual-scroll-viewport when navigating between pages or tabs. Any suggestions or insights into resolving this issue would be greatly appreciated.

Thank you in advance for your assistance!

[Julian Jandl]

hey @shiv8652 i'm working on a feature to set an initial scroll position. If you store the last scroll position you can set it as an input to easily restore the position you had before.

But anyway, for the autosize strategy you'll always be able to set the position to a specific view index. As of now, you should be able to do that by using the VirtualScrollViewport#scrollToIndex method.

In your component, store the last the scrolledIndex from the scrolledIndexChange event and apply it to the scrollToIndex method of the VirtualScrollViewport instance. Maybe in ngAfterViewInit or any other trigger that should set the scroll position.

e.g.

@ViewChild(RxVirtualScrollViewportComponent) private viewport: RxVirtualScrollViewportComponent;

ngAfterViewInit() {
  if (this.storedScrollIndex) {
    this.viewport.scrollToIndex(this.storedScrollIndex);
  }
}