title: How to enable scroll on background component even if a Modal is Open?
body: <p>I have a problem with Angular and Material for Angular, I have an application with many modals, they all lock background scrolling when they're open, but I have a notification modal, this notification modal isn't intended to block background scrolling.</p>
  
  <p>I don't have any .noScroll class in this modal, but the background page in relation to the modal still won't scroll, I want to the user to be able to scroll the page even with the notification modal open.</p>
  
  <p>The notification modal is a DialogRef from Material for Angular.</p>
  
  <p>I tried using overflow: visible and auto, also tried to modify the backdrop to enable scroll, but no success :(</p>
  
  <p>How do I make the backdrop of this particular modal to enable scrolling and possible override other configurations of the code?</p>
  
  <p>Edit: Here is part of the code ></p>
  
  <p>ModalService:</p>
  
  <pre><code>{
      constructor(private matDialog: MatDialog) {
          }   
  
   openNotificationsModal(topOffset, rightOffset): MatDialogRef&lt;NotificationsModalComponent&gt; {
          return this.notificationsModal(topOffset, rightOffset);
      }
  
      private notificationsModal(topOffset, rightOffset, clazz?: string): MatDialogRef&lt;NotificationsModalComponent&gt; {
              const config = {
                  panelClass: clazz ? clazz : 'notifications-modal',
                  backdropClass: 'cdk-overlay-transparent-backdrop',
                  data: {
                      topOffset,
                      rightOffset,
                  }
              };
              return this.matDialog.open(NotificationsModalComponent, config);
          }
      }
  </code></pre>
  
  <p>this is my modal component:</p>
  
  <pre><code>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&lt;NotificationsModalComponent&gt;) {}
  
      async ngOnInit() {
          this.dialogRef.updatePosition({
              top: '2.5rem'
          });
      }
  
      output() {
          this.dialogRef.close();
      }
  }
  </code></pre>
  
  <p>this is the scss of this modal:</p>
  
  <pre><code>    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;
          }
      }
  }
  </code></pre>