When a user select an option within the virtual scrolling it takes them to another route. When clicking the back button I want them to be in the same position within the virtual scroll.
I am injecting the CDK CdkVirtualScrollViewport like
@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport | null = null;
I am using the ngAfterViewInit lifecycle hook to use the CDK once the view has loaded up. I have put the logic to store the position within the ngAfterViewInit
public ngAfterViewInit(): void {
if (this.virtualScroll == null) return;
this.virtualScroll.elementScrolled().subscribe(() => {
if (this === null || this.virtualScroll === null) return;
const distFromBottom = this.virtualScroll.measureScrollOffset('bottom');
this.paginationHelper.detectEndOfScrollRaw(
distFromBottom,
this.rowSize,
5,
() => {
if (this.hasNext) this.scrollDirection.emit(ScrollDirection.Down);
}
);
// Save the current scroll position in localStorage
const scrollTop = this.virtualScroll.measureScrollOffset('top');
localStorage.setItem('pageScrollPosition', scrollTop.toString());
});
// Restore scroll position from localStorage
const savedScrollPosition = localStorage.getItem('pageScrollPosition');
if (savedScrollPosition) {
const scrollTop = parseInt(savedScrollPosition, 10);
setTimeout(() => {
if (this.virtualScroll) {
this.virtualScroll.scrollToOffset(scrollTop);
}
}, 100);
}
}
When I scroll down the page the pageScrollPosition
will update to where I am on page and when exiting the page the correct pageScrollPosition
is saved in local storage. When I then re-enter the page the pageScrollPosition
get's reset to a maximum of 639.
This changes on how big the screen is and depending on what I set public rowSize = 56;
to. My Virtual scrolling does use pagination but it's not even getting far enough to trigger this.