Angular Material mat-menu添加自定义内容后页面滚动时出现垂直滚动条问题

问题根因 #

Angular Material的mat-menu默认会根据当前视口位置动态计算面板的最大高度，你添加的自定义头部不属于mat-menu默认识别的mat-menu-item/mat-selection-list内容，动态计算高度时没有把这部分高度纳入统计，页面滚动时视口边界变化触发面板重新计算高度，就会出现内容溢出、强制出现滚动条、内容被压缩的问题。

解决方案 #

方案1：自定义面板样式，手动控制高度（适合滚动时需要保持菜单打开的场景）

1. 给mat-menu添加自定义面板类

<mat-menu #beforeMenu="matMenu" xPosition="before" panelClass="custom-select-menu">
  <!-- 原有内容不变 -->
</mat-menu>

2. 在全局样式文件（通常是styles.css）中添加覆盖样式：

/* 移除mat-menu默认的动态最大高度限制 */
.custom-select-menu .mat-menu-content {
  max-height: unset !important;
  padding: 0 !important;
}

/* 自定义头部样式 */
.custom-select-menu .checkbox-header {
  padding: 8px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* 让选项列表单独滚动，避免整个菜单过长 */
.custom-select-menu mat-selection-list {
  max-height: 320px;
  overflow-y: auto;
}

方案2：修改滚动策略，滚动时自动关闭菜单（符合Material设计规范，实现成本最低）

1. 组件中注入滚动策略工具类

import { ScrollStrategyOptions } from '@angular/cdk/overlay';

@Component({
  // 你的组件配置不变
})
export class MenuPositionExample {
  constructor(public scrollStrategyOptions: ScrollStrategyOptions) {}
  // 原有业务逻辑不变
}

2. 给菜单触发器绑定滚动策略

<button mat-button [matMenuTriggerFor]="beforeMenu" [scrollStrategy]="scrollStrategyOptions.close()">Before</button>

页面滚动时菜单会自动关闭，从根源避免滚动导致的菜单变形问题。

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