angular如何使mat-drawer滚动整个body

要将 Angular Material 中的 mat-drawer 滚动整个 body，可以使用 CSS 样式和 JavaScript 代码来实现。以下是实现的步骤：

1. 在 CSS 中设置 body 的 overflow 属性为 hidden，以防止页面滚动：

body {
  overflow: hidden;
}

2. 在 mat-drawer 的容器中设置 overflow 属性为 auto，以允许内容滚动：

<mat-drawer-container>
  <mat-drawer #drawer mode="side">
    <!-- Drawer content -->
  </mat-drawer>
  
  <div class="drawer-content">
    <!-- Main content -->
  </div>
</mat-drawer-container>

.drawer-content {
  overflow: auto;
  height: 100vh;
}

3. 在 JavaScript 中使用 ViewChild 来获取 mat-drawer 的实例，然后在打开和关闭 drawer 的时候添加和移除 CSS 类来控制 body 的滚动：

import { Component, ViewChild } from '@angular/core';
import { MatDrawer } from '@angular/material/sidenav';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('drawer') drawer: MatDrawer;

  toggleDrawer() {
    if (this.drawer.opened) {
      document.body.classList.remove('no-scroll');
    } else {
      document.body.classList.add('no-scroll');
    }
    this.drawer.toggle();
  }
}

4. 在 CSS 中定义 no-scroll 类来设置 body 的 overflow 属性为 hidden，并且添加一个 padding-right 属性来防止页面抖动：

.no-scroll {
  overflow: hidden;
  padding-right: 15px;
}

这样就可以实现在打开 mat-drawer 时禁止 body 滚动，并在关闭时允许滚动。