Question

我尝试在重新定位策略中为对话框滚动，但它对我不起作用。

const scrollStrategy = this.overlay.scrollStrategies.reposition();
const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } );

The full example

我希望在滚动期间整个对话框（元素.cdk-overlay-pane）会移动

Almost right behavior

Answer 1

如果要滚动对话框的内容，则必须使用<mat-dialog-content>标记，或在div元素中使用指令mat-dialog-content。在您的示例中，请尝试以下方法：

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<mat-dialog-content> <!-- instead of your <div>  or use <div mat-dialog-content> -->
  <p>What's your favorite animal!!!!!!!</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal!!!!!!</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</mat-dialog-content> <!-- instead of your </div> -->
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

现在你的对话框内容旁边应该有一个滚动条。在

上阅读有关对话框的可滚动内容容器的更多信息

https://material.angular.io/components/dialog/api#MatDialogContent

Answer 2

我正在寻找与 OP 类似的解决方案。提供的 example 中的技巧是在 overflow:auto 上设置 .cdk-global-overlay-wrapper。

将此 css 添加到您的样式中（不在对话框的 css 内）：

.cdk-global-overlay-wrapper {
  overflow: auto;
}

如果您想防止在背景上滚动，即父组件，只要对话框打开，您可以~~在父组件上设置 overflow: hidden。~~

~~.. 只需从示例中删除滚动策略。~~

Answer 3

比较所有文件的差异。 style.css中有额外的CSS

.cdk-global-overlay-wrapper {
  pointer-events: auto;
  display: block;
  position: relative;
  overflow: auto;
  text-align: center;
}

.cdk-global-overlay-wrapper::before {
  content: '';
  display: inline-block;
  height: 100%;
  white-space: nowrap;
}

.cdk-overlay-pane {
  display: inline-block;
  position: relative;
  text-align: left;
  white-space: normal;
}

Answer 4

自https://github.com/angular/material2/pull/11235以来，.mat-dialog-container得到max-height: inherit应该可以解决您的问题。

在对话框配置中设置maxHeight: window.innerHeight + 'px'可以防止对话框变得比屏幕大。

Answer 5

我尝试过这种方式

const dialogRef = this.dialog.open(LoginModalComponent, {
      autoFocus: false,
      maxHeight: '90vh' //you can adjust the value as per your view
});

Answer 6

您好，尝试将其放在您的style.css或style.scss

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
  overflow: auto;
  pointer-events: auto;  
}

Answer 7

添加下面两个属性就足够了。

.cdk-global-overlay-wrapper {
  overflow: auto;
  pointer-events: auto;  
}

如何在MatDialog中使用scrollStrategy？

7 个答案: