Angular Material中mat-tab-group切换标签时页面滚动至顶部问题咨询

我之前在项目里也碰到过这个让人头疼的问题，结合自己踩过的坑和社区里的经验，总结了几个最可能的原因，你可以逐一排查：

• 表单元素自动聚焦触发滚动
  切换标签页时，如果目标标签里存在input、textarea这类可聚焦的表单元素，浏览器会自动聚焦到页面中第一个可获取焦点的元素。如果这个元素不在当前视口内，浏览器就会自动滚动到它的位置，看起来就像是页面滚到了顶部。
  👉 排查&解决：检查标签内的表单元素，给不需要自动聚焦的元素加上tabindex="-1"或者autocomplete="off"；也可以在selectedIndexChange事件触发后，手动调用document.activeElement.blur()取消聚焦。

• 标签切换动画或动态内容导致的高度突变
  Angular Material的mat-tab-group默认带有切换动画，动画过程中标签容器的高度可能会发生临时变化，浏览器为了适配新的布局会自动调整滚动位置。另外，如果标签内容是异步加载的（比如接口数据返回后才渲染），切换时内容从无到有，高度突然增加，也可能触发滚动偏移。
  👉 排查&解决：先给mat-tab-group加上[disableAnimation]="true"禁用动画，看看问题是否消失。如果是动画的锅，可以调整动画的时长或者缓动函数；对于动态内容，尽量确保数据加载完成后再渲染标签，或者给标签容器设置固定高度。

• 路由绑定带来的滚动行为干扰
  如果你是通过路由来切换mat-tab（比如用routerLink绑定标签），路由切换时浏览器的默认滚动行为可能会生效。比如路由配置里的scrollPositionRestoration设为enabled，就会在路由切换时自动滚动到顶部；或者路由路径里带有锚点，也会触发滚动。
  👉 排查&解决：打开路由配置文件，把scrollPositionRestoration设置为disabled；如果用了路由锚点，要么移除锚点，要么通过监听Router的navigationEnd事件，手动控制滚动位置。

• 全局滚动逻辑的冲突
  如果项目里有全局的滚动监听指令、回到顶部按钮的逻辑，或者其他自定义的滚动操作，可能会在标签切换的时机被误触发。比如某些逻辑监听了DOM变化，在标签切换时误以为页面需要回到顶部。
  👉 排查&解决：搜索项目里的scrollTo、scrollTop相关代码，看看是否有在标签切换事件（selectedIndexChange）附近被调用的情况，给这些逻辑加上更精准的触发条件，比如只有特定按钮点击时才执行回到顶部。

• 浏览器滚动锚定特性的异常
  浏览器的滚动锚定（scroll anchoring）是为了防止页面内容变化时滚动位置跳变，但在标签切换这种DOM结构大幅变化的场景下，可能会出现反向问题：当旧标签的内容被移除，浏览器找不到原来的锚点元素，就会默认滚动到页面顶部。
  👉 排查&解决：给mat-tab-group的容器添加CSS样式overflow-anchor: none，禁用该容器的滚动锚定特性，看看是否能解决问题。

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