Angular 8防止下拉字段滚动触发windows滚动事件答案

【问题标题】：Angular 8 prevent dropdown field scroll trigger the windows scroll eventAngular 8防止下拉字段滚动触发windows滚动事件
【发布时间】：2020-05-11 09:52:18
【问题描述】：

我有一个顶部导航栏，当向下滚动页面时，需要在导航栏上进行一些 CSS 更改。

所以我在我的共享 header.component.ts 中使用 window.addEventListener 来检测滚动事件。但是如果在其他组件中有下拉字段会滚动条也会触发改变navbar css功能。

如何限制下拉字段不触发更改导航栏css功能？

header.component.ts

ngOnInit() {
    window.addEventListener('scroll', this.scroll, true);
  }

  scroll = (event: any): void => {
    const number = event.srcElement.scrollTop;
    const element = document.querySelector('.navbar');
    if (number > 50) {
      element.classList.add('toolbar-scroll');
    } else {
      element.classList.remove('toolbar-scroll');
    }
  }

【问题讨论】：

标签： javascript css angular

【解决方案1】：

我设法通过逐个查看所有事件来解决这个问题，发现 event.target.firstChild.nodeName 有一个唯一变量，可用于通过下拉字段区分组件

if (event.target.firstChild.nodeName === 'ROUTER-OUTLET') {
      if (number > 50) {
        element.classList.add('toolbar-scroll');
      } else {
        element.classList.remove('toolbar-scroll');
      }
    }

【讨论】：