Angular 5 Tabs切换时页面自动滚动到顶部问题求助

嘿，这个问题我太熟悉了！我之前在Angular 5搭配Material的项目里也碰到过一模一样的情况——切换标签页页面就自动滚到顶，烦得不行。其实根源是Angular Material的mat-tab组件在切换时会自动聚焦到新的tab内容区域，而浏览器的默认聚焦行为会触发页面滚动。给你几个亲测有效的解决办法：

方法1：阻止默认焦点行为并手动控制 #

直接给mat-tab-group绑定selectTab事件，在事件处理中阻止默认动作，同时手动设置焦点但避免滚动：

首先修改模板中的mat-tab-group：

<mat-tab-group dynamicHeight="true" (selectTab)="onTabSelect($event)">
  <!-- 你的tab内容保持不变 -->
</mat-tab-group>

然后在组件的TypeScript文件中添加事件处理方法：

import { MatTabChangeEvent } from '@angular/material/tabs';

// ... 其他组件代码

onTabSelect(event: MatTabChangeEvent) {
  // 阻止浏览器默认的聚焦滚动行为
  event.preventDefault();
  
  // 手动将焦点设置到激活的tab内容区域，但阻止滚动
  const activeTabBody = document.querySelector('.mat-tab-body-active');
  if (activeTabBody) {
    (activeTabBody as HTMLElement).focus({ preventScroll: true });
  }
}

方法2：自定义指令统一处理（更优雅） #

如果项目中有多个tab组件都有这个问题，可以写一个自定义指令来全局解决：

先创建指令文件prevent-tab-scroll.directive.ts：

import { Directive, HostListener } from '@angular/core';
import { MatTabGroup, MatTabChangeEvent } from '@angular/material/tabs';

@Directive({
  selector: '[preventTabScroll]'
})
export class PreventTabScrollDirective {
  constructor(private tabGroup: MatTabGroup) {}

  @HostListener('selectTab', ['$event'])
  onTabSelect(event: MatTabChangeEvent) {
    event.preventDefault();
    // 保持tab切换的正常逻辑
    this.tabGroup.selectedIndex = event.index;
    
    // 手动设置焦点，避免滚动
    const activeTabBody = document.querySelector('.mat-tab-body-active');
    if (activeTabBody) {
      (activeTabBody as HTMLElement).focus({ preventScroll: true });
    }
  }
}

然后在模板中直接使用这个指令：

<mat-tab-group dynamicHeight="true" preventTabScroll>
  <!-- 你的tab内容 -->
</mat-tab-group>

额外检查：排除锚点干扰 #

如果上面的方法没用，先检查你的tab内容里有没有带#的锚点元素（比如<a href="#top">），浏览器在tab切换时如果解析到锚点，也会自动滚动到对应位置，这种情况需要移除或修改锚点逻辑。

这些方法在Angular 5+Material 5.x的环境下都能正常工作，我当时就是用方法1快速解决的，后来为了统一管理换成了方法2。

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