黄兵的个人博客

angular mat-toolbar 滚动增加阴影

最近一段时间在学习Angular，在写一些小应用的时候遇到了很多问题，今天讲一讲mat-toolbar滚动增加阴影的方法。

首先看下面动图效果：

也就是滚动到一定的位置出现了一个阴影，在顶部阴影消失。

具体代码如下：

home.component.html

<mat-toolbar color="primary" class="mat-elevation-z0" [ngClass]="{'toolbar-shadow': shrinkToolbar}">

home.component.ts

import { NgZone} from '@angular/core';
import { ScrollDispatcher, CdkScrollable } from '@angular/cdk/scrolling';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private readonly SHRINK_TOP_SCROLL_POSITION = 15;
  shrinkToolbar = false;
 

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

  ngOnInit() {
    
    this.authenticationService.userChanged().subscribe(
      (user: User) => {
        this.name = user.givenName;
        this.isAdmin = this.authenticationService.isInRole('administrator');
      });

    this.scrollDispatcher.scrolled()
      .pipe(map((event: CdkScrollable) => this.getScrollPosition(event)))
      .subscribe(scrollTop => this.ngZone.run(() => this.shrinkToolbar = scrollTop > this.SHRINK_TOP_SCROLL_POSITION ? true : false));
  }

  getScrollPosition(event) {
    if (event) {
      return event.getElementRef().nativeElement.scrollTop;
    } else {
      return window.scrollY;
    }
  }
}

滚动ngOnInit组件的事件，获取scrollTop位置并设置一个标志，如果它大于某个阈值：将使样式重新设置。

你需要运行它，ngZone因为默认情况下scrolled()，ScrollDispatcher它们的事件在Angular之外运行。没有它，ChangeDetection将无法运行，您的模板也不会更新。

home.component.css

.toolbar-shadow {
  box-shadow: 0 4px 8px rgba(0,0,0,0.28);
}

参考资料：

1、Shrinkable mat-toolbar

2、Demo: Stackblitz

3、Toolbar | Angular Material

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - angular mat-toolbar 滚动增加阴影