Disable background scrolling when mat dialog is open

You can add this after opening the dialog:

document.body.classList.add("cdk-global-scrollblock");

And this after closing the dialog:

document.body.classList.remove("cdk-global-scrollblock");

In my case, i'm using gsap animation for parallax scroll to content. And opening the mat-dialog was causing the same issue. However, the class "cdk-global-scrollblock" was on html tag

<html class="cdk-global-scrollblock" style="...">...</html>

I had to remove the scrollblock on the html tag after opening the mat-dialog

const dialogRef = this.dialog.open(WorkDialogCardComponent, {
      width: '400px',
      data: this.item.data,
});

// Remove the scrollblock added by mat-dialog
document.documentElement.classList.remove("cdk-global-scrollblock");