Method setupScrollRestoration

adev/src/app/app-scroller.ts:44–95

()

  }

  private setupScrollRestoration(): void {
    let windowWidth = window.innerWidth;
    // Setting up a ResizeObserver to update the width on resize. (without triggering a reflow)
    const windowSizeObserver = new ResizeObserver((entries) => {
      windowWidth = entries[0].contentRect.width;
    });
    windowSizeObserver.observe(document.documentElement);
    inject(DestroyRef).onDestroy(() => windowSizeObserver.disconnect());

    const root = document.documentElement; // or any element with the variable
    const styles = getComputedStyle(root);
    // slice to drop the 'px'
    const xsBreakpoint = +styles.getPropertyValue('--screen-xs').slice(0, -2);
    const mdBreakpoint = +styles.getPropertyValue('--screen-md').slice(0, -2);

    this.viewportScroller.setHistoryScrollRestoration('manual');
    this.router.events
      .pipe(
        filter((e): e is Scroll => e instanceof Scroll),
        tap((e) => {
          this.cancelScroll?.();
          this.canScroll = true;
          this._lastScrollEvent = e;
        }),
        filter(() => {
          const info = this.router.lastSuccessfulNavigation()?.extras.info as Record<
            'disableScrolling',
            boolean
          >;
          return !info?.['disableScrolling'];
        }),
        switchMap((e) => {
          return firstValueFrom(
            this.appRef.isStable.pipe(
              filter((stable) => stable),
              map(() => e),
            ),
          );
        }),
      )
      .subscribe(() => {
        this.scroll();
      });

    if (windowWidth < xsBreakpoint) {
      this.viewportScroller.setOffset([0, 64]);
    } else if (windowWidth <= mdBreakpoint) {
      this.viewportScroller.setOffset([0, 140]);
    } else {
      this.viewportScroller.setOffset([0, 24]);
    }
  }

  private scroll(injector?: Injector) {
    if (!this._lastScrollEvent || !this.canScroll) {