Question

我无法弄清楚如何检测mat-sidenav-container在角度材质2中的滚动。

当用户滚动时，我想在我的组件上调用一个方法。但是，当使用sidenav-container时，不再在窗口上触发scroll事件。

而是添加了额外的<mat-sidenav-content cdkscrollable></mat-sidenav-content>元素，这是滚动条的位置。如果我无法直接访问它以在其上放置(scroll)="myMethod()"事件侦听器，如何检测此组件上何时发生滚动。

有什么想法吗？

Answer 1

您应该使用Material2示例"Sidenav with a FAB"。

请使用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>

这应该是你的css：

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

Answer 2

不要让Angular自动插入代码，而是在HTML中添加side-nav-content代码。然后你可以添加监听器。

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

Answer 3

代替在每个滚动事件上调用方法，您可以创建一个Observable滚动事件并进行订阅。

使用可观察的

enum Direction {
    Up = 'Up',
    Down = 'Down'
}

ngAfterViewInit() {
    const content = document.querySelector('.mat-sidenav-content');
    const scroll$ = fromEvent(content, 'scroll').pipe(
      throttleTime(10), // only emit every 10 ms
      map(() => content.scrollTop), // get vertical scroll position
      pairwise(), // look at this and the last emitted element
      map(([y1, y2]): Direction => (y2 < y1 ? Direction.Up : Direction.Down)), // compare this and the last element to figure out scrolling direction
      distinctUntilChanged(), // only emit when scrolling direction changed
      share(), // share a single subscription to the underlying sequence in case of multiple subscribers
    );

    const goingUp$ = scroll$.pipe(
      filter(direction => direction === Direction.Up)
    );

    const goingDown$ = scroll$.pipe(
      filter(direction => direction === Direction.Down)
    );

    goingUp$.subscribe(() => console.log('scrolling up');
    goingDown$.subscribe(() => console.log('scrolling down');
}

有关上面代码的进一步说明，请查看： https://netbasal.com/reactive-sticky-header-in-angular-12dbffb3f1d3

Answer 4

我当前的版本Angular 8
解决方案1：

检查内容是否位于

    <mat-sidenav-container fullscreen> </mat-sidenav-container>

在任何窗口方法（例如window.scroll（）和 window.pageYOffset之类的属性将无法使用
删除全屏并尝试。它会强文本

解决方案2：，您要使媒体资源保持全屏显示

检查内容是否位于

   <mat-sidenav-container fullscreen>
      <mat-sidenav></mat-sidenav> 
      <div>
         //your content
      </div>
   </mat-sidenav-container>

在上面，我没有将我的内容放在如下所示的mat-sidenav-content内，因为默认情况下，为您将角度放置在mat-sidenav-content标记内可为我们带来默认行为的好处
```
    <mat-sidenav-content>
       <div>
         //your content
      </div>
    </mat-sidenav-content>
```
从'@ angular / material / sidenav'导入{MatSidenavModule};在app.module.ts中并在imports数组中声明。
当滚动位置更改时，您希望在其中获取滚动事件的组件中执行一些操作。执行以下操作

    import { Component, NgZone , OnInit } from '@angular/core';
    import { ScrollDispatcher } from '@angular/cdk/scrolling';
    import { CdkScrollable } from '@angular/cdk/scrolling';
    @Component({
      selector: 'app-scroll-top',
      templateUrl: './scroll-top.component.html',
      styleUrls: ['./scroll-top.component.css']
    })
    export class ExampleComponent implements OnInit {


      constructor (private scrollDispatcher: ScrollDispatcher, private zone: NgZone) {}

      ngOnInit() {
      }

      ngAfterViewInit() {
        this.scrollDispatcher.scrolled().
        subscribe((cdk: CdkScrollable)  => {
        this.zone.run(() => {
        //Here you can add what to happen when scroll changed
        //I want to display the scroll position for example
          const scrollPosition = cdk.getElementRef().nativeElement.scrollTop;
          console.log(scrollPosition);
        });
        });
      }

Answer 5

你可以告诉我你的css文件吗？我也遇到了同样的问题，但由于以下css应用于mat-sidenav-container。

height: 100vh;

Answer 6

尝试添加fixedInViewport="true"

更多样式：[style.marginTop.px]="56"

Answer 7

<mat-sidenav-content>一旦有了cdkScrollable指令，就可以使用@ViewChild装饰器将其添加到组件中。

@ViewChild(CdkScrollable) scrollable: CdkScrollable;

然后，您可以通过订阅elementScrolled Observable来观察滚动行为：

this.scrollable.elementScrolled().subscribe(scrolled => console.log('scrolled', scrolled));

如何在mat-sidenav-container中检测滚动事件

7 个答案:

使用可观察的