从内部 div 检测滚动事件

Question

我希望能够在从可滚动的内部div而不仅仅是窗口目标滚动时检测事件。

例如，我有一个侦听滚动事件的指令，这里我需要将"主机："(窗口：滚动)"更改为其他内容。

import {Directive, Output, EventEmitter} from '@angular/core';
@Directive({
selector: '[infinite-scroll]',
host: {'(window:scroll)': 'track($event)'},
})
export class InfiniteScrollerDirective {
@Output() scrolled = new EventEmitter();
track(event: Event) {
this.scrolled.emit({
value: event
});
}
}

我在我的组件中将其用作具有"滚动"输出的无限滚动指令。

<div infinite-scroll (scrolled)="onScroll($event.value)">
<table class="table">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>...

事件就到这里了。

onScroll(event: UIEvent) {
}

Answer 1

我不知道为什么这里的每个人都试图搞砸@HostListener。在处理页面级事件时，它绝对是必需的，但不是子元素。 您可以使用 Angular 2 事件侦听器，而不是使用 JQuery 样式的事件绑定。如果您正在使用 inner-div，您需要做的就是使用如下所示的回调方法在div 上添加滚动事件侦听器：

.HTML：

<div (scroll)="onScroll($event)">
</div>

打字稿：

onScroll(event): void {
// Interpret the scroll event
// Do stuff on inner div scroll
}

Answer 2

Angular 2.0 RC

export class YourComponent {
@HostListener('scroll', ['$event']) private onScroll($event:Event):void {
console.log($event.srcElement.scrollLeft, $event.srcElement.scrollTop);
};
}

Answer 3

手动添加事件列表的最简单方法

document.addEventListener('scroll', (e)=>{
let el = this.elementRef.nativeElement;
if(el.contains(e.target)){
// do something
}
}, true);

末尾的"true"告诉浏览器在调度时捕获事件，即使该事件通常不会冒泡，例如更改、焦点和滚动。

不可能将 useCapture 参数传递给 @HostListener 或 renderer.listen。

销毁组件时，不要忘记删除此侦听器。

Answer 4

基于此'in-viewpoint'指令，您可以附加到自定义元素：

const CUSTOM_ELEMENT = this.elementRef.nativeElement || window; 
this.scrollWindow = Observable
.fromEvent(CUSTOM_ELEMENT, 'scroll').debounceTime(50).subscribe((event) => {
this.fireScrollEvent();
});

Answer 5

要从中捕获scroll事件的div应该是可滚动的。

使其可滚动

1. 它应该有一个适当的高度。
2. 然后将overflow: scroll添加到样式中。

完成上述操作后，您将获得来自任何div的滚动事件。

Answer 6

@Component({
selector: 'app-my-component',
template: `
<div id="my-inner-div" (scroll)="onScroll()">
<!-- content here -->
</div>
`
})
export class MyComponent {

fixedHeader: boolean = false
onScroll() {
this.fixedHeader = true;
}
}

为了使它可滚动，应该在div中使用(滚动)