0

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.

Hughesey
  • 358
  • 1
  • 17
  • scrollToIndex() and scrollToOffset() seem to override the value, and set a maximum depending on the screen size. – Hughesey Jul 25 '23 at 08:08

0 Answers0