Angular material2 当“角度材质选择”打开时禁用滚动

默认情况下，角度材质的select dropwon将允许页面相应地滚动和重新定位

在材料文档的原始页面上，“选择”下拉列表显示了不同的行为：它在打开时阻止滚动：

我如何实现这种行为？单击“选择”时，我没有找到任何选项或开关来禁用滚动

编辑：

---

我确实发现有一种叫做“mat select scroll strategy”的东西，但在任何地方都没有记录。谁能告诉我怎么用这个吗

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

--

---

您好，我不确定我是否理解问题和答案，但我希望下拉选项永远不会显示滚动条，无论选项列表有多长。你的解决方案不能做到这一点。你能澄清一下吗？这个问题是关于选择覆盖后面的页面滚动。您可能可以通过

overflow

CSS属性实现所需的功能。@Will Howell Yes。我在angular.io上注意到了这一点。奇怪的是，答案中提供的代码没有在angular.io示例的“代码”面板中使用。事实上，在任何地方都没有提到MAT_SELECT_SCROLL_策略？我只是想知道在angular.io上，是否将此策略添加到app.module.ts文件中？我希望能够在全球范围内使用这一策略，这样我只需要使用一次。而且，页面也会滚动，只是选择菜单会重新定位自身，使其位置相对于其父项保持不变。@Will Howell我发现了问题所在。默认情况下，滚动策略仅在主体上有效。如果子容器需要滚动策略，则需要向该容器添加以下输入：cdkScrollable。最后，我不喜欢这种效果，因为材质将选择列表保持在其他z索引之上。最后，我创建了自己的滚动策略，如果用户开始滚动其容器，选择列表将淡出。@Will Howell这似乎不适用于与body不同的滚动容器的autocomplete。我举了一个stackblitz的例子。我不得不将cdkScrollable添加到滚动容器中，然后重新定位并关闭do work，但block不起作用。有什么想法吗？

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] }
]