Floating Action Button nicht scrollen

Ich habe ein FAB enthalten in zwei div Tags von Eltern (app.component.html), wo einer von ihnen verwendet transform: translate3d.
Beim Scrollen auf der Seite bleibt der FAB stecken und scrollt nicht.Floating Action Button nicht scrollen

Ich möchte dieses FAB diese gesamte HTML-Seite zu überlagern (genauer gesagt: <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>

(Mutter Hochladen von Bildern funktionierte nicht)
Hier ist, wie es vor & nach Scroll aussieht:

Before
After

Quelle

2017-03-02 Moshe

haben Sie versucht, die Position des gelben Autos zu fixieren, damit es beim Blättern den Fluss der Seite verfolgt? https://www.w3schools.com/cssref/pr_class_position.asp, kann Sie nicht wirklich mehr führen, da Sie wie 2% Ihres Codes posten :) –

@UnknownPotato, ja ich habe. Das hat nicht funktioniert. – Moshe

Falls sich jemand mit diesem Problem gefangen, gibt es keine Lösung. Google-Material Thema, die Frage here angesprochen hat:

FABs innen sidenav

Für eine sidenav mit einem FAB (oder anderem schwimmendem Elemente), der empfohlene Ansatz ist es, die FAB außerhalb des rollbaren Bereichs zu platzieren und absolut positionieren.

Mit anderen Worten:
1. Legen Sie die Fab in Ihrem "app.component.html" (oder HTML-Mutterkomponente)
2. Verwendung * ngIF, um zu bestimmen, ob die aktuelle Route (oder Komponente) ist aktiv, wenn wahr -> zeige den FAB an.

Quelle

2017-03-06 19:38:42 Moshe

Sie verwenden CSS-Transformation auf .mat-sidenav-Inhalt.
CSS-Transformation erstellt ein neues lokales Koordinatensystem.

Fix entfernen verwandeln:

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

Obwohl es ihre Absicht, setzt die Hardware-Beschleunigung zu erzwingen.

Quelle

2017-04-27 13:14:58 Alexi

Da sie die CSS-Transformation verwenden, um ein neues lokales Koordinatensystem zu erstellen, wäre es nicht widersinnig, gegen die Welle zu gehen? Gibt es eine Möglichkeit, mit der Transformation korrekt zu arbeiten? – Moshe

Floating Action Button nicht scrollen

Antwort

Verwandte Themen