即使模态处于打开状态，如何在后台组件上启用滚动?

Question

我对 Angular 和 Angular 材质有问题，我有一个包含许多模态的应用程序，它们在打开时都会锁定背景滚动，但我有一个通知模态，此通知模态不打算阻止背景滚动。

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

通知模式是来自 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;位置，您可以尝试设置一个简单的解决方案overflow: auto !important;但更优雅的是在您的对话框中提供滚动策略