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

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