Angular如何在子popup弹窗打开时禁用父组件滚动功能

以下两种方案适配你使用Angular框架的场景：

方案1：父组件类名控制（最易维护） #

通过控制父组件自定义类名切换滚动状态，不需要修改弹窗组件逻辑：

1. 父组件新增锁定滚动样式

.parent-scroll-locked {
  overflow: hidden !important;
  /* 若父组件为全局根滚动容器，可添加以下属性避免页面跳动 */
  position: relative;
  height: 100vh;
}

2. 父组件模板绑定类名状态

<parent-component [class.parent-scroll-locked]="popupVisible">
  <button (click)="popupVisible = true">打开弹窗</button>
  <child-popup *ngIf="popupVisible" (close)="popupVisible = false"></child-popup>
</parent-component>

popupVisible为你控制弹窗显示/隐藏的布尔变量。

方案2：弹窗组件内自治（完全解耦） #

直接在弹窗组件生命周期中处理父组件滚动状态，父组件无需额外改造：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'child-popup',
  template: `<!-- 弹窗原有内容结构 -->`,
  styles: [/* 弹窗原有样式 */]
})
export class ChildPopupComponent implements OnInit, OnDestroy {
  private scrollContainer: HTMLElement;
  private originalOverflowVal: string;
  private savedScrollY: number;

  ngOnInit(): void {
    // 若为全局页面滚动，替换下方选择器为 document.body
    this.scrollContainer = document.querySelector('parent-component') as HTMLElement;
    if (!this.scrollContainer) return;

    // 保存原有样式属性，关闭时恢复
    this.originalOverflowVal = this.scrollContainer.style.overflow;
    this.savedScrollY = window.scrollY;

    // 锁定滚动
    this.scrollContainer.style.overflow = 'hidden';
    // 若锁定后出现页面跳顶问题，添加以下两行代码
    // this.scrollContainer.style.position = 'fixed';
    // this.scrollContainer.style.top = `-${this.savedScrollY}px`;
  }

  ngOnDestroy(): void {
    if (!this.scrollContainer) return;
    // 恢复原有滚动状态
    this.scrollContainer.style.overflow = this.originalOverflowVal;
    // 对应上面的跳顶修复，解锁时添加以下代码
    // this.scrollContainer.style.position = '';
    // this.scrollContainer.style.top = '';
    // window.scrollTo(0, this.savedScrollY);
  }
}

注意事项 #

• 若弹窗内部需要滚动，给弹窗内容容器添加overflow: auto; height: 100%;样式即可，不会受父容器滚动锁定影响
• 移动端场景下如果出现穿透滚动问题，可以给弹窗根元素添加touch-action: pan-y;属性

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