Angular Material中打开mat-autocomplete时如何禁用外部滚动？

方法一：通过组件事件控制body滚动状态 #

监听autocomplete的展开/收起事件，动态修改body的滚动样式：

1. 组件类中添加事件监听逻辑：

import { MatAutocomplete } from '@angular/material/autocomplete';
import { ViewChild } from '@angular/core';

@ViewChild('autoComplete') autoComplete!: MatAutocomplete;

ngAfterViewInit() {
  this.autoComplete.opened.subscribe(() => {
    document.body.style.overflow = 'hidden';
  });
  this.autoComplete.closed.subscribe(() => {
    document.body.style.overflow = '';
  });
}

2. 模板中绑定autocomplete引用：

<mat-autocomplete #autoComplete="matAutocomplete">
  <!-- 选项列表内容 -->
</mat-autocomplete>

方法二：修复BlockScrollStrategy的生效问题 #

如果默认block策略无效，尝试手动触发滚动锁定：

1. 组件内自定义滚动策略：

import { Overlay, BlockScrollStrategy } from '@angular/cdk/overlay';

constructor(private overlay: Overlay) {}

getCustomBlockStrategy(): BlockScrollStrategy {
  const strategy = this.overlay.scrollStrategies.block();
  // 显式调用enable方法强制锁定滚动
  strategy.enable();
  return strategy;
}

2. 模板中绑定该策略：

<mat-autocomplete [scrollStrategy]="getCustomBlockStrategy()">
  <!-- 选项列表内容 -->
</mat-autocomplete>

方法三：全局CSS利用面板状态类锁定滚动 #

Angular Material会在面板打开时给body添加mat-autocomplete-panel-open类，直接通过全局样式控制：

在全局样式文件（如styles.scss）中添加：

body.mat-autocomplete-panel-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者sodi ppp