从内部 div 检测滚动事件答案

【问题标题】：Detect scroll event from inner div从内部 div 检测滚动事件
【发布时间】：2016-06-22 14:27:51
【问题描述】：

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

例如，我有一个监听滚动事件的指令，这里我需要将 'host: '(window:scroll)' 更改为其他内容。

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) {

 }

【问题讨论】：

那么问题出在哪里？ <div infinite-scroll> 不会触发 scrolled 事件吗？
plnkr.co/edit/BFAK87jCR81dcBbz5HxS?p=preview
这个链接有帮助吗naive_infinite_scroll/scroll_area.tsgithub.com/angular/angular/blob/…
问题是滚动事件只在窗口滚动而不是内部 div 滚动时触发。

标签： angular

【解决方案1】：

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

HTML：

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

</div>

打字稿：

onScroll(event): void {

    // Interpret the scroll event
    // Do stuff on inner div scroll
}

【讨论】：

【解决方案2】：

Angular 2.0 RC

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

【讨论】：

【解决方案3】：

手动添加EventListner的最简单方法

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

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

无法将 useCapture 参数传递给 @HostListener 或 renderer.listen。

当你销毁组件时不要忘记移除这个监听器。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

使其可滚动

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

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

【讨论】：