Angular mat-menu超长菜单（95项）超出页面的解决咨询

我之前做项目时也碰到过类似的大菜单溢出问题，试了好几种方法，给你分享几个亲测有效的解决方案：

1. 给菜单面板添加滚动容器（最快见效） #

mat-menu的默认面板没有滚动限制，所以大量菜单项会直接超出页面。你需要针对.mat-menu-panel设置最大高度和滚动属性，而不是只改.mat-menu-item。

步骤： #

• 给你的mat-menu加个自定义类，比如large-scroll-menu：

<mat-menu class="large-scroll-menu" #yourMenu="matMenu">
  <!-- 95个菜单项 -->
</mat-menu>

• 在组件的SCSS（或全局styles.scss）里添加样式：

.large-scroll-menu .mat-menu-panel {
  max-height: 80vh; /* 用视口高度，适配不同屏幕大小 */
  overflow-y: auto; /* 垂直方向超出滚动 */
  width: 280px; /* 可选：固定菜单宽度，避免内容撑太宽 */
}

/* 可选：美化滚动条 */
.large-scroll-menu .mat-menu-panel::-webkit-scrollbar {
  width: 7px;
}
.large-scroll-menu .mat-menu-panel::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

如果组件内样式不生效（因为Angular的样式隔离），可以加上:host ::ng-deep：

:host ::ng-deep .large-scroll-menu .mat-menu-panel {
  max-height: 80vh;
  overflow-y: auto;
}

2. 菜单分组拆分（提升用户体验） #

95个菜单项放在一个菜单里用户查找也麻烦，不如按类别拆分成多级子菜单：

<mat-menu #mainMenu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="categoryAMenu">类别A</button>
  <button mat-menu-item [matMenuTriggerFor]="categoryBMenu">类别B</button>
  <!-- 更多分类按钮 -->
</mat-menu>

<mat-menu #categoryAMenu="matMenu">
  <button mat-menu-item>菜单项A1</button>
  <button mat-menu-item>菜单项A2</button>
  <!-- 类别A下的所有菜单项 -->
</mat-menu>

<mat-menu #categoryBMenu="matMenu">
  <button mat-menu-item>菜单项B1</button>
  <button mat-menu-item>菜单项B2</button>
  <!-- 类别B下的所有菜单项 -->
</mat-menu>

这种方式不仅解决了溢出问题，还让菜单结构更清晰，用户找起来更方便。

3. 使用虚拟滚动（适合超大量数据） #

如果菜单项是动态生成的，且数量确实很大，推荐用Angular CDK的虚拟滚动，它只会渲染当前可见的菜单项，既解决溢出又提升性能：

步骤： #

1. 先导入CDK的滚动模块到你的模块里：

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    // 其他模块
    ScrollingModule
  ]
})
export class YourModule { }

2. 在模板里使用虚拟滚动容器：

<mat-menu #virtualMenu="matMenu">
  <cdk-virtual-scroll-viewport itemSize="48" class="virtual-menu-container">
    <button mat-menu-item *cdkVirtualFor="let item of yourMenuItems">{{ item.label }}</button>
  </cdk-virtual-scroll-viewport>
</mat-menu>

3. 添加样式：

.virtual-menu-container {
  height: 80vh;
  width: 280px;
}

itemSize是每个菜单项的高度（mat-menu-item默认高度是48px），虚拟滚动会根据这个值计算可见区域的项数。

为什么之前修改.mat-menu-item没用？ #

因为溢出的问题是出在菜单的容器（.mat-menu-panel）上，而不是单个菜单项。单个菜单项的样式只会影响自身，不会限制整个菜单的高度，所以必须针对容器设置滚动和高度限制。

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