Angular中模态框打开/关闭时为body添加/移除overflow:hidden的实现方法

方案1：自定义封装模态框的场景 #

如果是自己封装的模态框组件/服务，通过修改 body 样式实现，同时兼容多模态框叠加的场景：

• 首先通过 Angular 官方提供的 DOCUMENT 令牌操作 DOM，避免直接调用 window.document 导致服务端渲染（SSR）兼容问题
• 新增打开模态框计数器，避免多模态框叠加时，关闭其中一个就恢复 body 滚动的异常
  示例代码如下：

// modal.service.ts
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class ModalService {
  // 统计当前打开的模态框数量
  private openModalCount = 0;

  constructor(@Inject(DOCUMENT) private doc: Document) {}

  openModal(): void {
    this.openModalCount++;
    // 只有第一个模态框打开时才加样式
    if (this.openModalCount === 1) {
      this.doc.body.style.overflow = 'hidden';
      // 可选：解决滚动条消失导致的页面宽度跳动问题
      const scrollBarWidth = window.innerWidth - this.doc.documentElement.clientWidth;
      this.doc.body.style.paddingRight = `${scrollBarWidth}px`;
    }
    // 你原有打开模态框的业务逻辑
  }

  closeModal(): void {
    this.openModalCount--;
    // 只有最后一个模态框关闭时才移除样式
    if (this.openModalCount === 0) {
      this.doc.body.style.overflow = '';
      this.doc.body.style.paddingRight = '';
    }
    // 你原有关闭模态框的业务逻辑
  }
}

方案2：使用 Angular Material 模态框的场景 #

Angular Material CDK 已经封装了禁止背景滚动的能力，无需手动操作 body 样式，只需在打开模态框时配置滚动策略即可：

// 调用模态框的组件代码
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ScrollStrategyOptions } from '@angular/cdk/overlay';
import { YourModalComponent } from './your-modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(
    private dialog: MatDialog,
    private scrollStrategyOptions: ScrollStrategyOptions
  ) {}

  openCustomModal() {
    this.dialog.open(YourModalComponent, {
      width: '500px',
      // 配置打开模态框时禁止背景滚动
      scrollStrategy: this.scrollStrategyOptions.block()
    });
  }
}

如果你使用的是其他第三方模态框组件，大多自带禁止背景滚动的配置项，直接开启对应配置即可，无需手动操作DOM。

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