Angular 8防止下拉字段滚动触发Windows滚动事件

Question

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

因此，我在共享的header.component.ts中使用window.addEventListener来检测滚动事件。但是，如果在其他组件中具有下拉字段，滚动条也会触发导航栏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');
    }
  }

Answer 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');
      }
    }