Angular页面：滚动至顶部正常，向下滚动后点击页面自动回顶问题求助

我太懂你这个糟心的问题了——页面刚加载时滚动一切正常，但往下翻一点再点页面任何位置，就直接弹回顶部，这问题根源其实出在你用的ngAfterViewChecked生命周期钩子上！

问题诊断 #

ngAfterViewChecked这个钩子的特性是每次视图发生更新都会触发，可不是只在页面首次渲染时执行哦。用户点击页面时，哪怕只是触发了一点点微小的视图变化（比如某个绑定值的更新、DOM元素的状态改变），这个钩子都会重新跑一遍。而你在里面写了scrollIntoView()，这就相当于每次视图一变，就强制把元素滚到视口位置，自然会出现“点击就回顶”的诡异现象。

解决方案 #

根据你的需求，这里有几个可行的处理方式：

方案一：改用只执行一次的生命周期钩子

如果你的需求只是页面初始化时滚动到顶部，那完全没必要用ngAfterViewChecked，换成ngAfterViewInit就好——这个钩子只会在视图首次初始化完成后执行一次：

ngAfterViewInit() {
  this.element.nativeElement.scrollIntoView();
}

方案二：加开关控制滚动代码的执行次数

如果确实需要在某些视图更新场景下触发滚动，但不是每次都滚，可以加个状态变量当开关：

private shouldScroll = true;

ngAfterViewChecked() {
  if (this.shouldScroll) {
    this.element.nativeElement.scrollIntoView();
    this.shouldScroll = false; // 执行一次后就关闭开关，避免重复触发
  }
}

要是你需要在特定业务场景下重新开启滚动（比如某个数据加载完成后），只需要把shouldScroll再设为true就行。

方案三：手动控制滚动触发时机

如果是要控制页面或某个容器的滚动，不如把滚动逻辑抽成单独的方法，只在真正需要的时候调用（比如页面初始化、数据加载完成）：

// 自定义滚动方法
scrollToTargetElement() {
  this.element.nativeElement.scrollIntoView();
  // 要是需要滚动到容器顶部，也可以用这个
  // this.mainPageComponent.rightPanel.nativeElement.scrollTo(0, 0);
}

// 在合适的时机调用，比如页面初始化
ngAfterViewInit() {
  this.scrollToTargetElement();
}

// 或者在某个按钮点击、数据加载完成后调用
onDataLoaded() {
  this.scrollToTargetElement();
}

核心思路就是：别让滚动代码跟着ngAfterViewChecked的高频率触发跑，而是控制它只在你需要的时候执行。

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