0

I am displaying a large image contained in the template of a child component through the template of a parent component. Upon loading the view of my parent component, I would like the window of my browser to scroll to a specified position to display the center of that image.

At the moment, 1) upon loading the parent page for the first time : my window does not scroll, 2) upon refreshing the page : my window does not scroll and 3) upon returning to the home screen of my app and going back to the parent component : my window scrolls as wished.

How can I make the window scroll systematically on first loading of the page ?

Thank you all in advance !

Code samples

parent.component.ts

import { AfterViewChecked, Component } from "@angular/core";

@Component({
  selector: "app-parent",
  templateUrl: "./parent.component.html",
  styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements AfterViewChecked {
  ngAfterViewChecked() {
    window.scrollTo(1900, 840);
  }
}

parent.component.html

<app-child></app-child>

child.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-child",
  templateUrl: "./child.component.html",
  styleUrls: ["./child.component.css"]
})
export class ChildComponent {}

child.component.html

<!-- link points to a non-specific 3840 x 2606 jpg image -->
<img src="https://i.imgur.com/5FpYloV.jpg" />

EDIT

I decided to use a free dragging directive on my main HTML element instead of scrolling around it. I find the dragging more user-friendly that having to wait for the scrolling to end.

douarremaxime
  • 11
  • 4

2 Answers2

1

Try scrolling in the child instead.

export class ChildComponent implements AfterViewInit {
  ngAfterViewInit() {
    window.scrollTo(1900, 840);
  }
}

You should also calculate position because the current code will fail on different devices.

You could try something like this:

<img #imageRef src="https://i.imgur.com/5FpYloV.jpg" />

export class ChildComponent implements AfterViewInit {
  @ViewChild('imageRef') image: ElementRef<HTMLImageElement>;

  ngAfterViewInit() {
    const rect = this.image.nativeElement.getClientBoundingRect();
    window.scrollTo(rect.x, rect.y);
  }
}

You mention that the image isn't loaded when you try to scroll, so you can try something like this too:

<img #imageRef src="https://i.imgur.com/5FpYloV.jpg" (load)="scrollTo(imageRef)" /> 

export class ChildComponent implements AfterViewInit {

  scrollTo(image: HTMLImageElement) {
    const rect = image.getClientBoundingRect();
    window.scrollTo(rect.x, rect.y);
  }
}
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
  • We can also use Angular's `Viewport Scroller` https://angular.io/api/common/ViewportScroller instead of window.scrollTo – Vikas Jul 21 '21 at 13:08
  • 1) Scrolling from the child component, 2) calculating the scrolling position and 3) using `ViewportScroller` does not change the behavior of my application : it only scrolls the second time that I access the page. Upon first loading, nothing happens. BUT, upon debugging, I noticed that my image is not even loaded during the `ngAfterViewChecked`. This explains why the scrolling can not work. I need to find a way around this ; I will try a timeout if I have no other choice. Thank you anyway for your replies! – douarremaxime Jul 21 '21 at 16:36
  • @douarremaxime I've updated my answer with another potential solution. – Chrillewoodz Jul 22 '21 at 07:29
0

I guess you need to scroll to position inside the ngOnInit(), it's well described in answer:

https://stackoverflow.com/a/35278480/8049667

Sh. Pavel
  • 1,584
  • 15
  • 28