Question

我有一个FAB包含在父（div）的两个app.component.html标记中，其中一个使用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

注意：
Similar but not duplicate
Related
Also Related

Answer 1

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

修复以删除转换：

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

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

Answer 2

如果有人遇到此问题，则无法解决问题。 Google的Material主题已解决了问题here：

侧边的FAB

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

换句话说：
1.将Fab放在“app.component.html”（或父组件的HTML）中 2.使用* ngIF确定当前路由（或组件）是否有效，如果为真 - >显示FAB。

浮动操作按钮不滚动

2 个答案: