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

问题描述

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

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

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

我怎样才能实现这种行为?单击选择时我没有找到任何选项或切换到禁用滚动

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

解决方案

由于 mat-select 组件通过 DI 注入策略，您可以在您的组件中(或在模块级别，如果您愿意)提供替代方案.

>

import { MAT_SELECT_SCROLL_STRATEGY } from '@angular/material';从 '@angular/cdk/overlay' 导入 { Overlay, BlockScrollStrategy };导出函数 scrollFactory(overlay: Overlay): () =>块滚动策略{返回 () =>overlay.scrollStrategies.block();}//...供应商: [{ 提供:MAT_SELECT_SCROLL_STRATEGY，useFactory:scrollFactory，deps:[Overlay] }]

--

STACKBLITZ

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

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

EDIT: 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?

解决方案

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屋！