angular - mat-menu 向下滚动，页面位于固定底部导航上，仅限移动设备和 Chrome

Question

依赖项:@Angular/Material 6.4.7、@Angular/cdk 6.4.7

问题:https://github.com/angular/material2/issues/11365

他们说它已修复，但我仍然遇到以下行为，仅在移动设备和 Chrome 上

注意:滚动时出现的皮卡丘按钮不会影响任何内容，已测试。

<button class="nav-Menu" mat-icon-button [matMenuTriggerFor]="menu">
 <mat-icon>more_vert</mat-icon>
</button>

<mat-menu #menu="matMenu" [overlapTrigger]="false">

<button [routerLink]="['home']" routerLinkActive="active" mat-menu-item>
  <mat-icon svgIcon="pikachu"></mat-icon> <!-- Home -->
  <span>Home</span>
</button>

<button routerLinkActive="active" mat-menu-item 
 [matMenuTriggerFor]="Database">
  <mat-icon svgIcon="database"></mat-icon> <!-- Database -->
  <span>Database</span>
</button>

<button routerLinkActive="active" mat-menu-item [matMenuTriggerFor]="Tools">
 <mat-icon svgIcon="tools"></mat-icon> <!-- Tools -->
 <span>Tools</span>
</button>

<button routerLinkActive="active" mat-menu-item 
[matMenuTriggerFor]="Guides">
  <mat-icon svgIcon="guides"></mat-icon> <!-- Guides -->
  <span>Guides</span>
</button>

</mat-menu>

<mat-menu #Database="matMenu" > <!-- Database Menu -->
  <button [routerLink]="['pokedex']" routerLinkActive="active"
      mat-menu-item><mat-icon svgIcon="bulbasaur"></mat-icon>Pokédex
  </button>
  <button [routerLink]="['moves']" routerLinkActive="active"
      mat-menu-item><mat-icon svgIcon="move"></mat-icon>Moves
  </button>
</mat-menu>

<mat-menu #Tools="matMenu" > <!-- Tools Menu -->
  <button [routerLink]="['laboratory']" routerLinkActive="active"
      mat-menu-item><mat-icon svgIcon="laboratory"></mat-icon>Laboratory
  </button>
</mat-menu>

<mat-menu #Guides="matMenu"> <!-- Guides Menu -->
  <button [routerLink]="['guides/victory-road']" routerLinkActive="active"
      mat-menu-item><mat-icon svgIcon="victory-road"></mat-icon>Victory Road
  </button>
</mat-menu>

注 2:顶部导航垫菜单按预期工作，仅在底部固定导航上出现问题

Answer 1

嗯，我不知道这是否有帮助，但是 Angular Material 中的大多数“弹出”组件都有一些共同点，例如背景和 panelClass，以及 ScrollStrategy，它定义了这些组件的行为方式。有 4 种类型，“重新定位”、“noop”、“关闭”和“阻止”。 “reposition”是默认值，当您滚动时会更改 mat-menu 位置...“noop”表示无论页面是否滚动它都会保持在同一位置，“close”表示每当您滚动时 mat-menu 都会关闭开始滚动到垫子菜单之外...最后“阻止”意味着您不能滚动到垫子菜单之外。以下是我如何根据用户的设备(无论是否可触摸)有条件地实现它的示例:

import { MAT_MENU_SCROLL_STRATEGY } from '@angular/material';
import { Overlay, BlockScrollStrategy, RepositionScrollStrategy, CloseScrollStrategy, NoopScrollStrategy } from '@angular/cdk/overlay';


const isToucheDevice = () => {
  try {
    document.createEvent('TouchEvent');
    return true;
  } catch (e) {
    return false;
  }
};

const scrollBlockFactory = (overlay: Overlay): () => BlockScrollStrategy  => {
  return () => overlay.scrollStrategies.block();
};

const scrollRepositionFactory = (overlay: Overlay): () => RepositionScrollStrategy  => {
  return () => overlay.scrollStrategies.reposition();
};

@Component({
  selector: 'app-search-criteria-form',
  templateUrl: './search-criteria-form.component.html',
  styleUrls: ['./search-criteria-form.component.scss'],
  providers: [
    { provide: MAT_MENU_SCROLL_STRATEGY, useFactory: isToucheDevice() ? scrollBlockFactory : scrollRepositionFactory, deps: [Overlay] }
  ]
})

重要的是，您将其添加到组件的提供程序上，并且，顺便说一句，它必须位于父组件中，或者至少我无法使其在我使用 mat-menu 的同一级别上工作。 。 同样重要的是，每当您创建要 checkout 的函数时，您都会传递类型，定义它是否应该返回 RepositionScrollStrategy 或任何一个。像这样(显然没有星星):

const scrollRepositionFactory = (overlay: Overlay): () => **RepositionScrollStrategy**  => {
  return () => overlay.scrollStrategies.reposition();
};