Angular Material页面没有滚动内容？答案

【问题标题】：Angular Material page not scrolling with content inside?Angular Material页面没有滚动内容？
【发布时间】：2018-03-27 19:19:07
【问题描述】：

编辑问题是路由器动画强制“固定”位置，如果我禁用动画它会修复它，但我想使用动画所以我试图弄清楚如何修复它。这是被称为强制“固定”从而破坏滚动的动画代码：

function slideToBottom() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%', height:'100%'}) ),
    state('*', style({position:'fixed', width:'100%', height:'100%'}) ),
    transition(':enter', [
      style({transform: 'translateY(-100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateY(0%)'}))
    ]),
    transition(':leave', [
      style({transform: 'translateY(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateY(100%)'}))
    ])
  ]);
}

我正在处理一个登录页面，但我终生无法弄清楚它为什么拒绝滚动，这是组件 HTML：

<div class="primaryColorBG" style="height:60%;">
  <div fxFlex fxLayoutAlign="center center">
    <div [ngStyle]="{'fontSize': '3rem'}" [ngStyle.lt-md]="{'fontSize': '2rem'}" [ngStyle.lt-sm]="{'fontSize': '1.5rem'}"  class="text-right title-font accentTextColor">Callum<br>Tech</div>
    <div style="padding-left:10px;" [ngStyle]="{'fontSize': '2rem'}" [ngStyle.lt-md]="{'fontSize': '1.25rem'}" [ngStyle.lt-sm]="{'fontSize': '0.9rem'}">
      <div class="text-left">Angular Framework</div>
      <div class="text-left">Google Design Standards</div>
      <div class="text-left">Responsive Layout</div>
    </div>
  </div>
</div>
<div
     fxLayout="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px">
  <div class="item item-4" fxFlex="400px">Item 4</div>
  <div class="item item-5" fxFlex="200px">Item 5</div>
</div>
<mat-toolbar>test</mat-toolbar>

此页面没有 css 或 javascript，但全局 css 文件是这样的：

@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import '~@angular/material/theming';

// Define a custom mixin that takes in the current theme
@mixin theme-color-grabber($theme) {
  // Parse the theme and create variables for each color in the pallete
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  // Create theme specfic styles
  .primaryColorBG {
    background-color: mat-color($primary);
  }
  .accentColorBG {
    background-color: mat-color($accent);
  }
  .warnColorBG {
    background-color: mat-color($warn);
  }
  .accentTextColor {
    color: mat-color($accent)
  }
  .primaryTextColor {
    color: mat-color($primary)
  }
  .warnTextColor {
    color: mat-color($warn)
  }
}

.title-font {
  font-family: "Comfortaa";
}


//Palettes
$mat-black: (
  50 : #e2e2e2,
  100 : #b7b7b7,
  200 : #878787,
  300 : #575757,
  400 : #333333,
  500 : #0f0f0f,
  600 : #0d0d0d,
  700 : #0b0b0b,
  800 : #080808,
  900 : #040404,
  A100 : #a6a6a6,
  A200 : #8c8c8c,
  A400 : #737373,
  A700 : #666666,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #ffffff,
    400 : #ffffff,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #ffffff,
    A700 : #ffffff,
  )
);

它在导航栏组件下方的路由函数中被调用

我不知道它为什么这样做，而且我从来没有真正遇到过这样的问题，我检查了“位置固定”等，但在我的样式表中似乎没有任何东西

注意我正在使用我的 Material 2 运行 bootstrap v4 css

编辑

是否有足够的内容允许滚动？

是的，我有一个占页面高度 60% 的元素，然后我添加了 2 个相互堆叠的项目，如果您向外滚动很远，您可以在底部看到它们

【问题讨论】：

是否有足够的内容允许滚动？
是的，我有一个元素是页面高度的 60%，然后我添加了 2 个相互堆叠的项目，如果你滚动很远，你可以在底部看到它们
没有帮助，我做过许多类似/相同的测试，包括用 !important 强制 css 优先级，但没有结果
如果您创建 plnkr，那么我可以帮助您。

标签： css twitter-bootstrap angular angular-material

【解决方案1】：

根据我的经验，您将fxFlex 用于flexGridLayout。

我看不到“已修复”的内容，但将这样的 css 样式添加到包含您要滚动的内容的元素中，可能有助于解决您的问题。

overflow-y: auto;

【讨论】：