即使模式打开，如何在背景组件上启用滚动？

Question

我在使用 Angular 和 Material for Angular 时遇到问题，我有一个包含许多模式的应用程序，它们在打开时都会锁定背景滚动，但我有一个通知模式，此通知模式并非旨在阻止背景滚动。

我在这个模态中没有任何 .noScroll 类，但是与模态相关的背景页面仍然不会滚动，我希望用户即使在通知模态打开的情况下也能够滚动页面。

通知模式是来自 Material for Angular 的 DialogRef。

我尝试使用溢出：可见和自动，也尝试修改背景以启用滚动，但没有成功:(

如何制作此特定模式的背景以启用滚动并可能覆盖代码的其他配置？

编辑：这是部分代码>

模态服务：

{
    constructor(private matDialog: MatDialog) {
        }   

 openNotificationsModal(topOffset, rightOffset): MatDialogRef<NotificationsModalComponent> {
        return this.notificationsModal(topOffset, rightOffset);
    }

    private notificationsModal(topOffset, rightOffset, clazz?: string): MatDialogRef<NotificationsModalComponent> {
            const config = {
                panelClass: clazz ? clazz : 'notifications-modal',
                backdropClass: 'cdk-overlay-transparent-backdrop',
                data: {
                    topOffset,
                    rightOffset,
                }
            };
            return this.matDialog.open(NotificationsModalComponent, config);
        }
    }

这是我的模态组件：

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material';

@Component({
    selector: 'aa-notifications-modal',
    templateUrl: './notifications-modal.component.html',
    styles: []
})
export class NotificationsModalComponent {

    constructor(private dialogRef: MatDialogRef<NotificationsModalComponent>) {}

    async ngOnInit() {
        this.dialogRef.updatePosition({
            top: '2.5rem'
        });
    }

    output() {
        this.dialogRef.close();
    }
}

这是这个模态的scss：

    aa-notifications-modal {
    width: 100%;
}
.notifications-modal {
    width: 100%;
    max-width: 100% !important;
    pointer-events: none !important;
    .mat-dialog-container {
        display: flex;
        justify-content: flex-end;
        background: transparent;
        width: 100%;
        box-shadow: none;
    }

    .align-triangle {
        display: flex;
        justify-content: flex-end;
        padding: 0;
        .triangle {
            margin-right: 4rem;
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 25px solid #fff;
        }
    }

    .space {
        padding: 0;
    }

    .content-modal {
        display: flex;
        justify-content: flex-end;
        margin-right: 8rem;
        aa-notifications-list {
            width: 427px;
            pointer-events: auto;
            border-radius: 5px;
        }
    }
}

Answer 1

据我所知，您需要找出 overflow: hidden; 可能在 body 标签上的位置，一个简单的解决方案您可以尝试设置 overflow: auto !important; 但更优雅的是在您的对话框中提供Scroll strategy