如何在Angular 2中借助Angular Material与Flex Layout避免多余滚动条

嘿，我之前在Angular Material + Flex Layout的项目里也踩过滚动条的坑，咱们一步步来搞定这些多余的滚动条：

一、先搞定全局水平滚动条的问题 #

页面出现水平滚动，大概率是某个元素的宽度超出了视口范围，常见的原因和解决方法：

• 检查mat-sidenav的布局：确保你用mat-sidenav-container包裹侧边栏和主内容区，并且主内容区用fxFlex占据剩余空间，不要让侧边栏+主内容区的总宽度超过屏幕。比如：

  <mat-sidenav-container style="height: 100%;">
    <mat-sidenav mode="side" opened>侧边栏内容</mat-sidenav>
    <mat-sidenav-content fxFlex>
      <!-- 你的表单、表格都放这里 -->
    </mat-sidenav-content>
  </mat-sidenav-container>
  

• 约束mat-table的宽度：如果表格列太宽导致溢出，要么给列设置固定宽度，要么让单元格内容自动换行。比如给mat-cell加样式：

  mat-cell {
    word-wrap: break-word;
    white-space: pre-wrap;
    max-width: 200px; /* 根据需求调整 */
  }
  

  另外，给表格的父容器加overflow-x: auto，这样表格内部会出现水平滚动条，而不是整个页面。

二、解决页面级的垂直滚动条 #

你只给mat-table设了max-height，但页面还是有垂直滚动，可能是根容器的高度没设置对：

• 先给全局样式加上：

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  app-root, mat-sidenav-container {
    height: 100%;
  }
  

  这样整个应用的容器会填满视口高度，不会因为默认的margin/padding导致总高度超出。
• 检查主内容区的布局：用Flex Layout的fxLayout="column"和fxFlex让内容区自适应剩余空间，避免内容叠加后超出视口。比如把表单和表格放在一个fxFlex的容器里：

  <mat-sidenav-content fxFlex fxLayout="column">
    <mat-form-field style="margin: 1rem;">
      <!-- 表单控件 -->
    </mat-form-field>
    <div style="max-height: 70vh; overflow-y: auto; flex: 1;">
      <mat-table [dataSource]="dataSource">
        <!-- 表格内容 -->
      </mat-table>
    </div>
  </mat-sidenav-content>
  

三、xs视口下的多滚动条问题 #

小屏幕下滚动条变多，主要是布局适配没做好：

• 动态调整表格列：用Angular CDK的BreakpointObserver检测xs视口，隐藏非必要的列，减少表格宽度：

  import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
  
  // 组件里的代码
  displayedColumns: string[] = ['id', 'name', 'email', 'address'];
  
  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe(Breakpoints.XSmall).subscribe(res => {
      this.displayedColumns = res.matches ? ['id', 'name'] : ['id', 'name', 'email', 'address'];
    });
  }
  

• 调整sidenav的模式：xs视口下把sidenav改成mode="over"（叠加模式），不要让它占据屏幕宽度，避免主内容区被挤压溢出：

  <mat-sidenav #sidenav [mode]="isXs ? 'over' : 'side'" [opened]="!isXs">
    <!-- 侧边栏内容 -->
  </mat-sidenav>
  

  这里的isXs可以通过BreakpointObserver来获取。

最后再检查这几点 #

1. 有没有给某些元素加了固定的宽高，导致超出视口？
2. Flex Layout的指令有没有用对？比如fxFlex是否正确分配了空间？
3. 有没有多余的margin/padding让容器总尺寸变大？

按照这些步骤调整，应该就能把多余的滚动条都干掉啦！

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