Angular 11中页面首次加载时如何让浏览器窗口滚动到指定位置

当前滚动逻辑失效是因为ngAfterViewChecked触发时，子组件内的大尺寸图片还未完成异步加载，此时页面整体可滚动区域尺寸还没有被图片撑开，调用window.scrollTo时目标滚动坐标超出了当前页面实际可滚动范围，因此没有视觉上的滚动效果。从首页跳转返回时图片已经被浏览器缓存，加载速度远快于首次/刷新场景，视图渲染完成时图片已经加载完成，所以滚动可以生效。

我们可以通过子组件监听图片加载完成事件，主动通知父组件执行滚动操作，保证滚动触发时图片已经渲染完成，页面可滚动区域符合要求。

1. 修改子组件逻辑 #

首先给子组件增加图片加载完成的事件发射器：

// child.component.ts
import { Component, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-child",
  templateUrl: "./child.component.html",
  styleUrls: ["./child.component.css"]
})
export class ChildComponent {
  // 定义图片加载完成事件
  @Output() imgLoaded = new EventEmitter<void>();

  onImgLoad() {
    this.imgLoaded.emit();
  }
}

然后给子组件的img标签绑定load事件：

<!-- child.component.html -->
<!-- 链接指向一张尺寸为3840 x 2606的jpg图片 -->
<img src="https://i.imgur.com/5FpYloV.jpg" (load)="onImgLoad()" />

2. 修改父组件逻辑 #

父组件监听子组件的图片加载完成事件触发滚动即可，不需要再用ngAfterViewChecked（该钩子会频繁触发，性能表现较差）：

// parent.component.ts
import { Component } from "@angular/core";

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

父组件模板绑定子组件的imgLoaded事件：

<!-- parent.component.html -->
<app-child (imgLoaded)="scrollToTarget()"></app-child>

如果担心图片加载失败导致滚动不触发，可以同时给img标签绑定error事件，异常时也触发事件通知即可。
你提到的自由拖拽方案确实适配大尺寸图片浏览的场景，用户可自主控制浏览区域，体验会比强制滚动更好。

内容的提问来源于stack exchange，提问作者douarremaxime