打开角度材质选择时禁用滚动 [英] Disable Scrolling when angular-material select is open

问题描述

默认情况下，选择角材料的下拉菜单将允许页面滚动并相应地重新定位自身.

By default the select-dropwon of angular-material will allow the page to scroll and reposition itself accordingly.

在材料文档的原始页面上，选择下拉列表显示了一个不同的行为:它在openend时阻止滚动:

On the original page of the material-documentation the select-dropdown shows a differetn behaviour: it blocks scrolling when openend:

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

如何实现此行为?单击选择时，我没有找到任何选项或切换为禁用滚动

How can I achieve this behaviour? I did not find any options or switch to disable scrolling when the select is clicked

我确实发现有一个叫做"mat-select-scroll-strategy"的东西，但是没有记录在任何地方.有人可以给我提示如何使用吗?

I did find that there is a thing called "mat-select-scroll-strategy", but it is not documented anywhere. Can anybody give me a hint how to use this?

推荐答案

由于mat-select组件通过DI注入了策略，因此您可以在组件中(或者您希望的话，在模块级别)提供替代方案.

Since the mat-select component injects a strategy through DI, you can provide an alternative in your component (or at the module level if you wish).

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

这篇关于打开角度材质选择时禁用滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！