浮动操作按钮不滚动答案

【问题标题】：Floating Action Button not scrolling浮动操作按钮不滚动
【发布时间】：2017-04-27 21:14:58
【问题描述】：

我有一个 FAB 包含在来自父级 (app.component.html) 的两个 div 标记中，其中一个使用 transform: translate3d。
向下滚动页面时，FAB 被“卡住”并且不滚动。

我希望这个 FAB 覆盖整个 HTML 页面（特别是：<div class="page-content">）
HTML：

  <div cdk-scrollable="" class="mat-sidenav-content" ng-reflect-ng-style="    " style="margin-left: 0px; margin-right: 0px; transform:     translate3d(0px, 0px, 0px);">
      <div class="page-container">
        <router-outlet></router-outlet>
    <app-carbuilder _nghost-wxw-148="">
            <button style="position: absolute;bottom: 16px;right: 16px;z-index: 5" data-toggle="collapse" data-target="#demo"  aria-expanded="false" aria-controls="demo" md-fab>
            <md-icon>
              directions_car
            </md-icon>
          </button>
        <div class="page-content">
            <p>content</p>
    </div>

（无法上传原生图片）
这是滚动前后的样子：

Before
After

【问题讨论】：

您是否尝试过将黄色汽车的位置设置为固定，以便在您滚动时跟随页面流？ w3schools.com/cssref/pr_class_position.asp，因为您发布了 2% 的代码，所以无法真正指导您：)
@UnknownPotato，是的，我有。这没有用。

标签： javascript css angular angular-material2 angular-template

【解决方案1】：

他们在 .mat-sidenav-content 上使用 CSS 转换。
CSS 变换创建了一个新的局部坐标系。

修复删除变换：

.mat-sidenav-content {
    transform: none !important;
}

虽然它重置了他们强制硬件加速的意图。

【讨论】：

既然他们使用 CSS 变换来创建一个新的局部坐标系，逆潮流而动不是违反直觉吗？相反，有没有办法正确处理转换？

【解决方案2】：

万一有人遇到这个问题，就没有解决办法。 Google 的 Material 主题已经解决了这个问题here:

sidenav 内的 FAB

对于带有 FAB（或其他浮动元素）的 sidenav，推荐方法是将FAB放在可滚动区域之外绝对定位。

换句话说：
1. 将 Fab 放入您的“app.component.html”（或父组件的 HTML）
2. 使用 *ngIF 判断当前路由（或组件）是否处于活动状态，如果为 true -> 显示 FAB。

【讨论】：