Html 如何在打开模式的情况下启用后台滚动组件？

我对Angular和Angular的材质有一个问题，我有一个有很多模式的应用程序，它们在打开时都会锁定后台滚动，但是我有一个通知模式，这个通知模式不是用来阻止后台滚动的

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

通知模式是一个DialogRef from Material for Angular

我尝试使用overflow:visible和auto，还尝试修改背景以启用滚动，但没有成功：(

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

编辑：这是部分代码>

ModalService：

{
    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);
        }
    }

---

据我所知，您需要找出溢出：隐藏的位置；很可能位于body标签上，这是一个简单的解决方案，您可以尝试设置溢出：自动！重要；

---

但更优雅的是在您的对话框中提供

我尝试将溢出更改为自动！重要的是，运气不好，我将查看滚动策略

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();
    }
}

    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;
        }
    }
}