Wie Scroll-Ereignisse in matten sidenav-Behälter

Question

Ich kann nicht herausfinden, zu erkennen, wie zu erkennen, wenn die Matte-sidenav-Behälter Rollen in Winkelmaterial 2.

Ich möchte eine Methode auf meine Komponente aufzurufen wenn ein Benutzer scrollt. Bei Verwendung des Sitenav-Containers wird das Bildlaufereignis jedoch nicht mehr im Fenster ausgelöst.

Stattdessen wird ein zusätzliches <mat-sidenav-content cdkscrollable></mat-sidenav-content> Element hinzugefügt, und hier befinden sich die Bildlaufleisten. Wie kann ich feststellen, wenn Scrollen bei dieser Komponente auftritt, wenn ich nicht direkt darauf zugreifen kann, um einen (scroll)="myMethod()" Event-Listener darauf zu setzen.

Irgendwelche Ideen?

Answer 1

Können Sie mir Ihre CSS-Datei zeigen? Ich hatte auch das gleiche Problem, aber aufgrund der folgenden CSS auf Mat-SideNav-Container angewendet.

height: 100vh; 

Answer 2

sollten Sie verwenden Material2 Beispiel "Sidenav with a FAB".

Bitte wickeln scrollbaren Inhalt mit div:

<mat-sidenav-container class="example-sidenav-fab-container"> 
    <mat-sidenav #sidenav mode="side" opened="true"> 
    ... 
    </mat-sidenav> 
    <div class="example-scrolling-content" (scroll)="handleScroll($event)"> 
    ... content ... 
    </div> 
</mat-sidenav-container> 

und dies sollte Ihre CSS sein:

.example-scrolling-content { 
    overflow: auto; 
    height: 100%; 
} 

Answer 3

Anstatt Angular lassen den Tag automatisch einfügen, schließen die side-nav-content Tag im HTML. Dann können Sie den Listener hinzufügen.

<mat-sidenav-container> 
    <mat-sidenav> 
    </mat-sidenav> 
    <mat-sidenav-content (scroll)="myScrollHandler($event)"> 
    </mat-sidenav-content> 
</mat-sidenav-container>