typescript 使用@HostListener 的窗口滚动事件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45937867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Window scroll event using @HostListener not working
提问by tolceza
I have problem making sticky header when scrolling down, in an Angular 4 application. Scroll event can't be detected.
在 Angular 4 应用程序中向下滚动时制作粘性标题时遇到问题。无法检测到滚动事件。
Header is placed in the layout component, and the content I want to be scrolling is placed in routes component. May that be the problem?
Header放在layout组件中，我要滚动的内容放在routes组件中。这可能是问题吗？
This is the code I implemented.
这是我实现的代码。
In layout.component.ts
在 layout.component.ts
import { Component, OnInit, HostListener, Inject } from '@angular/core';
import { DOCUMENT } from "@angular/platform-browser";
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
public navIsFixed: boolean = false;
constructor(public router: Router, @Inject(DOCUMENT) private document: any) { }
@HostListener('window:scroll', [ ])
onWindowScroll(){
const number = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop || 0;
if (number > 50) {
this.navIsFixed = true;
} else if (this.navIsFixed && number < 10) {
this.navIsFixed = false;
}
}
}
In layout.component.html
在 layout.component.html
<div [class.fixed]="navIsFixed" class="header">
回答by Zahema
I just had the same problem, all what I had to do was to make sure that the component element is actually what is scrolling & that it has a overflowproperty with values scrollor auto.
我只是遇到了同样的问题，我所要做的就是确保组件元素实际上是滚动的并且它具有overflow带有值scroll或auto.
Otherwise just this worked:
否则就是这样：
@HostListener('scroll')
public asd(): void {
console.log('scrolling');
}
回答by Carsten
This should give you scroll events:
这应该给你滚动事件：
@HostListener('scroll', ['$event'])
onScroll(event) {
...
}
or
或者
<div (scroll)="onScroll($event)"
回答by Vega
Your layout must be the source of the issue. The scroll event works only when the the component template element can actually scroll. See this stackblitzthat I made. Change the div dimensions and the scroll will not be triggered. In order to make it work, I would suggest to make it to the directive and set to a div that has 100vh in height and 100vw in width.
您的布局必须是问题的根源。只有当组件模板元素可以真正滚动时，滚动事件才起作用。看看我做的这个stackblitz。更改 div 尺寸不会触发滚动。为了使其工作，我建议将其设置为指令并设置为高度为 100vh 和宽度为 100vw 的 div。
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({ selector: '[trackScroll]' })
export class TrackScrollDirective {
constructor(private el: ElementRef) {
}
@HostListener('document:scroll', [])
onScroll(): void {
console.log('I am scrolled');
}
}
