How to prevent scroll position reset during route changes in Angular with custom scrollable...

I'm working on an Angular project where I have a custom scrollable container inside a layout component that holds nested routes. I'm encountering an issue where, during route transitions, the scroll position of my custom container resets to the top, and I want to preserve the scroll position.

Here's what I’ve tried so far:

• 
  I've disabled scrollPositionRestoration in the Angular router configuration, but the issue persists.
  
  
• 
  I'm handling the scroll position manually by listening to the scroll event on the custom container and saving the scrollTop value.
  
  
• 
  On route change, I'm restoring the saved scroll position in the NavigationEnd or Scroll router events.
  
  
• 
  However, after the route transition, the scroll position briefly restores to the saved value but immediately scrolls to the top, causing an undesirable flicker, since i am using angular router animation. the leaving component first jumps to top than the flicker happens after tgat entering component shows up.
  

My Requirements:

• 
  The scroll position of the container (dashboardLayoutContent) should remain where it is when navigating between routes.
  
  
• 
  I want to manually set the scroll position to 0 only when required, not automatically on route change. so that the flicker not occurs during animation.
  

How can I prevent the custom scrollable container from resetting its scroll position during route changes? How can I fix this issue without using workarounds like setTimeout that cause more problems?

Any help would be greatly appreciated!

public onScrollDashboardLayoutContent(event: Event): void {
const target = event.target as HTMLDivElement;
this.scrollPosition.set(target.scrollTop); // Save the current scroll position
}

private scrollPositionRestorationHandler(): void {
this.subscriptions.push(
this._router.events.subscribe((event) => {
console.log(event); // Log router events to debug

if (event instanceof Scroll || event instanceof NavigationEnd) {
const contentContainer = this.dashboardLayoutContent().nativeElement;

// Restore the saved scroll position
const savedScrollPosition = this.scrollPosition();
contentContainer.scrollTop = savedScrollPosition;

setTimeout(() => {
contentContainer.scrollTop = 0;
}, 10);
}
})
);
}


<div
#dashboardLayoutContent
class="dashboard-layout-content"
(scroll)="onScrollDashboardLayoutContent($event)"
>
<div
class="dashboard-layout-outlet"
[@.disabled]="isLoadingFirstTime()"
[@routerSlideInOut]="_contexts.getContext('primary')?.route?.snapshot?.data"
>
<router-outlet />
</div>
</div>

Continue reading...