[Drawer] Drawer 组件 block 页面滚动事件且会在 resize 后失效

[yangxiaolang]

需要的改动

1. 根据 mask 输入来调整 overlayRef 的 scrollStrategy
2. Drawer 组件内部监听 resize 事件激活滚动策略

问题描述

按照设计规范，应当只在存在遮罩层时 block 底部内容区的交互

当前在无遮罩层时 click 操作是正常的。
若底部内容区可以滚动，则只要打开 Drawer ，无论是否有遮罩层，都无法滚动页面

2023-10-09.16-56-03.mp4

原因是 Drawer 默认的 scrollStrategy 固定为了阻止页面滚动

  private getOverlayConfig(): OverlayConfig {
    return new OverlayConfig({
      panelClass: DRAWER_OVERLAY_CLASS,
      positionStrategy: this.overlay.position().global(),
      scrollStrategy: this.overlay.scrollStrategies.block(),
    });
  }

应当根据 mask 输入来选择不同的 scrollStrategy 策略

此外，还有一个 angular/cdk 的已知问题，即 scrollStrategy 为阻止页面滚动时，如果打开抽屉后，缩放了窗口触发了 window:resize 事件，会导致页面可以滚动

2023-10-09.17-06-30.mp4

原因是，抽屉的滚动策略生效是在抽屉打开时，若打开时就不需要滚动，则阻止页面滚动不会生效，详情见 angular/components#10841

可能需要抽屉内部监听 resize 事件来重新激活滚动策略