Question

编辑问题是路由器动画强制修复＆＃39;位置，如果我禁用动画它修复它，但我想使用动画所以我试图弄清楚如何解决它。这是被调用的动画代码，强制修复＆＃39;因此打破了卷轴：

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个堆叠在彼此顶部的项目，如果你向外滚动很远，你可以在底部看到它们

Answer 1

根据我的经验，您使用fxFlex作为flexGridLayout。

我无法看到正在发生的事情＆＃39;固定＆＃39;但是将这样的css样式添加到包含要滚动的内容的元素中可能有助于解决您的问题。

overflow-y: auto;

Angular Material页面内容不滚动内容？

1 个答案: