Chrome 88中Angular Material Dialog意外滚动条问题排查与解决

成因分析 #

我之前也碰到过完全一样的问题，排查下来核心原因是旧版本组件与现代浏览器的兼容性冲突：

• Angular Material 10和11属于停止官方维护的旧版本，它们的对话框样式是基于早年浏览器的滚动条计算逻辑开发的。
• 近期Chrome、Firefox等主流浏览器调整了滚动条的渲染规则（比如滚动条占用空间的计算方式变化），导致原本刚好适配的对话框容器出现了多余的滚动条。
• 官方示例也存在该问题，正好说明这不是你的代码或配置问题，而是旧组件版本和新浏览器环境的适配矛盾。

解决方法 #

下面是几个亲测有效的修复方案，按实用性排序：

1. 全局CSS补丁（推荐）

在项目的全局样式文件（比如styles.scss）中添加以下代码，直接覆盖MatDialog容器的样式：

.mat-dialog-container {
  // 彻底移除无端出现的滚动条
  overflow: hidden !important;
  // 如果需要保留内容溢出时的垂直滚动，可替换为：
  // overflow-y: auto;
  // overflow-x: hidden;
  padding-right: 0 !important;
}

这个方法能一次性解决所有对话框的问题，不需要逐个修改对话框配置。

2. 单个对话框自定义样式

如果不想全局修改，可在打开对话框时指定专属样式类，再针对性调整：

// 打开对话框的逻辑代码
this.dialog.open(YourTargetDialogComponent, {
  panelClass: 'custom-no-scrollbar-dialog'
});

然后在样式文件中添加对应规则：

.custom-no-scrollbar-dialog {
  overflow: hidden !important;
  padding-right: 0 !important;
}

3. 限制滚动条到内容区域

如果对话框内有自定义内容容器，也可以把滚动条限制在内容区内，避免整个对话框出现滚动条：

.your-dialog-content-wrapper {
  height: 100%;
  overflow-y: auto;
}

额外提示 #

由于Angular Material 10/11已不在官方支持周期内，官方不会针对新浏览器的变化发布修复补丁，所以CSS补丁是最直接的解决方案。如果后续有版本升级计划，建议升级到Angular Material 12及以上版本，这些新版本已经适配了现代浏览器的滚动条规则。

内容的提问来源于stack exchange，提问作者Klaster_1 Нет войне