如何在开始滚动和透明后将角度材质工具栏背景颜色更改为白色？

Posted 2023-03-06

【中文标题】如何在开始滚动和透明后将角度材质工具栏背景颜色更改为白色？

【英文标题】：How to change angular material toolbar background-color to white after scrolling and transparent in start?

【发布时间】：2021-08-18 19:47:31

【问题描述】：

我正在尝试使用角度材料将工具栏的背景颜色更改为滚动时的白色。

<mat-toolbar class="main-container" color="primary">
 <div fxHide.gt-sm>
  <button mat-icon-button (click)="onToggleSidenav()">
    <mat-icon class="menu-toggle">menu</mat-icon>
  </button>
 </div>
 <div class="logo-area">
  <a routerLink="/"><img class="logo" src="assets/images/logo/logo-main.svg" ></a>
 </div>
</mat-toolbar>

【参考方案1】：

使用 - 获取 ts 文件中的元素

<mat-toolbar class="main-container" #templateRefName color="primary">
@ViewChild('templateRefName') el: ElementRef;

  constructor(private renderer: Renderer2) 
  

并添加监听器 -

@HostListener('window:scroll', ['$event'])
onWindowScroll($event) 
    console.log("scrolling...");
    this.renderer.setStyle(this.el.nativeElement, 'background', 'yellow');

【讨论】：

感谢您的回答，但我想我问错了问题。问题应该是：滚动后如何将角度材质工具栏背景颜色更改为白色？

@aboutbenjamin 试试 this.renderer.setStyle(this.el.nativeElement, 'background', '#fff !mportant');

【参考方案2】：

您可以使用窗口触发的滚动事件。检查这个答案： How to get on scroll events?

【讨论】：

滚动后如何将角度材质工具栏背景颜色更改为白色？