Within the structure of my app, I have a parent component that displays a large image from a child component. When the parent component loads, I want the browser window to automatically scroll to a specific position in order to center the image.
Currently, there are inconsistencies in how the window scrolls: 1) on the initial load of the parent page, there is no scrolling, 2) when refreshing the page, the window does not scroll, and 3) navigating back to the parent component after being on the home screen causes the desired scrolling behavior.
How can I ensure that the window consistently scrolls to the correct position upon first loading 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 than waiting for the scrolling to complete.