Class AppScroller

adev/src/app/app-scroller.ts:23–126

@Service()
export class AppScroller {
  private readonly router = inject(Router);
  private readonly viewportScroller = inject(ViewportScroller);
  private readonly appRef = inject(ApplicationRef);
  private readonly injector = inject(EnvironmentInjector);
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  private _lastScrollEvent?: Scroll;
  private canScroll = false;
  private cancelScroll?: () => void;

  get lastScrollEvent(): Scroll | undefined {
    return this._lastScrollEvent;
  }

  constructor() {
    if (this.isBrowser) {
      this.setupScrollRestoration();
    }
  }

  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),
            ),