Question

默认情况下，angular-material的select-dropwon将允许页面滚动并相应地重新定位。

在材料文档的原始页面上，select-dropdown显示了一个不同的行为：它在openend时阻止滚动：

https://material.angular.io/components/select/overview

我该如何实现这种行为？我没有找到任何选项或切换到单击选择时禁用滚动

编辑：我确实发现有一种叫做“mat-select-scroll-strategy”的东西，但它没有在任何地方记录。任何人都可以给我一个如何使用它的提示吗？

Answer 1

由于mat-select组件通过DI注入策略，因此您可以在组件中提供替代方案（如果您愿意，可以在模块级别提供）。

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

export function scrollFactory(overlay: Overlay): () => BlockScrollStrategy {
  return () => overlay.scrollStrategies.block();
}

// ...

providers: [
  { provide: MAT_SELECT_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] }
]

-

STACKBLITZ

当角度材质选择打开时禁用滚动

1 个答案: