1

I have a component consisting of a list of many cards (like a grid format). Upon scrolling down and selecting one of the cards, I would expect to return to the same scroll position when I press the browser back button.

I'm unable to use Router's scrollPositionRestoration method as it is located in my child component.

Appreciate your help!

iBlehhz
  • 548
  • 4
  • 18

2 Answers2

2

I was able to make it work by adding

{ scrollPositionRestoration: 'top' } to the RouterModule.forRoot(routes) like this:

RouterModule.forRoot(routes, { scrollPositionRestoration: 'top' })

And it worked 100%

Code Mickey
  • 812
  • 4
  • 8
  • 1
    was it for a child component? I understand that it only works if its for parent components, cause child component does not allow .forRoot – iBlehhz Feb 28 '20 at 06:03
1

Okay I found a solution after reading Angular 2 Scroll to top on Route Change. I just added a window.setTimeout as a temporary fix, even though I don't think it's the best solution.

import { NavigationStart, Router } from "@angular/router";
import { Location, PopStateEvent } from "@angular/common";
import { OnInit } from "@angular/core";

export class xxxComponent implements OnInit {
    lastPoppedUrl = "";
    yScrollStack: number[] = [];

    constructor(private location: Location, private router: Router) {
        this.location.subscribe((ev: PopStateEvent) => {
            this.lastPoppedUrl = ev.url;
        });

        this.router.events.subscribe((ev: any) => {
            if (ev instanceof NavigationStart) {
                if (ev.url !== this.lastPoppedUrl) {
                    this.yScrollStack.push(window.scrollY);
                } else {
                    this.lastPoppedUrl = undefined;
                    window.setTimeout(() => {
                        window.scrollTo(0, this.yScrollStack.pop());
                    }, 300);
                }
            }
        });
    }
}

UPDATE (4th Oct 2019)

My page lazy loads its contents. I've update my code to the following:

this.location.subscribe((ev: PopStateEvent) => {
  this.lastPoppedUrl = ev.url;
});
this.router.events.subscribe((ev: any) => {
  if (ev instanceof NavigationStart) {
    if (ev.url !== this.lastPoppedUrl) {
      this.yScrollStack.push(window.scrollY);
    } else {
      this.lastPoppedUrl = undefined;
      const yposition = this.yScrollStack.pop();
      let maxInterval = 0; // used to stop subscription
      interval(this.scrollInterval)
        .pipe(
          takeWhile(_ => window.scrollY < yposition && maxInterval < 5000)
        )
        .subscribe(_ => {
          maxInterval += this.scrollInterval;
          window.scrollTo({
            top: yposition,
            left: 0,
            behavior: 'smooth',
          });
        });
    }
  }
});

Let me know if there are any better solution out there. If the user can immediately return to the same position of the previous page instead of scrolling downwards that would be best, thanks!

iBlehhz
  • 548
  • 4
  • 18