플로팅 작업 버튼이 스크롤되지 않음

부모 중 하나의 div 태그에 FAB가 포함되어 있습니다 (app.component.html). 그 중 하나에는 transform : translate3d가 사용됩니다.
페이지를 아래로 스크롤하면 FAB이 '붙어서'스크롤되지 않습니다.
는 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>

여기가 스크롤 한 후 & 전에 보이는 방법 (기본 이미지 업로드가 작동하지 않았다) :

나는 (<div class="page-content"> 구체적으로)이 FAB이 전체 HTML 페이지를 오버레이 할 :

Before
After

참고 : 경우 사람에
Similar but not duplicate
Related
Also Related

출처

2017-03-02 Moshe

노란 차의 위치를 고정 시켜서 스크롤 할 때 페이지의 흐름을 따라 보았습니까? https://www.w3schools.com/cssref/pr_class_position.asp, 2 %의 코드를 게시 한 이후로 더 많은 것을 실제로 안내 할 수는 없습니다 :) –

@UnknownPotato, 예. 이것은 작동하지 않았다. – Moshe

이 문제 잡았되고, 해결책이 없습니다. 구글의 재료 테마가 문제 here를 해결했습니다 팹 (또는 다른 부동 요소)와 sidenav를 들어 sidenav

내부

팹 권장 방법은 스크롤 영역 외부의 FAB을 배치하고 절대적으로 배치하십시오.
1.
2. 사용은 현재 경로 (또는 구성 요소) ngIF이 결정하는 것입니다 * 경우 "app.component.html"의 팹 (또는 상위 구성 요소의 HTML) : 즉

true이면 활성화 -> FAB을 표시합니다.

출처

2017-03-06 19:38:42 Moshe

그들은 .mat-sidenav-content에서 CSS 변환을 사용합니다.
CSS 변환은 새 로컬 좌표계를 만듭니다.

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

을가 하드웨어 가속을 강제로 자신의 의사를 재설정 있지만 :

수정 변환 제거합니다.

출처

2017-04-27 13:14:58 Alexi

그들은 새로운 로컬 좌표계를 만들기 위해 CSS 변환을 사용하기 때문에 웨이브에 반대하는 것이 직관적이지 않을까요? 대신 변환을 올바르게 사용하는 방법이 있습니까? – Moshe

플로팅 작업 버튼이 스크롤되지 않음

답변

관련 문제