Angular-Material Sidenav cdkScrollable

Question

The Angular Material CDK provides a Directive CdkScrollable, which allows you to listen to ScrollEvents of a specific container.

Answer 1

1. Add to your app module imports: ScrollDispatchModule.
2. Add cdkScrollable to your mat-sidenav-content:

3. In your root component:

a) inject ScrollDispatcher from @angular/cdk/overlay and subscribe to scrolling:

constructor(public scroll: ScrollDispatcher) {

    this.scrollingSubscription = this.scroll
          .scrolled()
          .subscribe((data: CdkScrollable) => {
            this.onWindowScroll(data);
          });
}

c) do something when scrolling, e.g. check the offset

private onWindowScroll(data: CdkScrollable) {
    const scrollTop = data.getElementRef().nativeElement.scrollTop || 0;
    if (this.lastOffset > scrollTop) {
      // console.log('Show toolbar');
    } else if (scrollTop < 10) {
      // console.log('Show toolbar');
    } else if (scrollTop > 100) {
      // console.log('Hide toolbar');
    }

    this.lastOffset = scrollTop;
  }

Documentation: https://material.angular.io/cdk/scrolling/api

Update Angular 9 :

Use import {ScrollingModule} from '@angular/cdk/scrolling', ScrollDispatchModule is deprecated