浮动操作按钮不滚动

Question

我有一个 FAB 包含在父 (app.component.html) 的两个 div 标签中，其中一个使用 transform: translate3d.
向下滚动页面时，FAB 'stuck' 不滚动。

我希望这个 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

注：
Similar but not duplicate
Related
Also Related

Answer 1

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

FABs inside sidenav

For a sidenav with a FAB (or other floating element), the recommended approach is to place the FAB outside of the scrollable region and absolutely position it.

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

Answer 2

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

修复删除变换：

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

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

浮动操作按钮不滚动

Floating Action Button not scrolling

javascript

css

angular

angular-material2

angular-template