Обнаружение события прокрутки из внутреннего div

Я хочу иметь возможность обнаруживать события при прокрутке с прокручиваемого внутреннего 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) {

 }

Ответы

Ответ 1

Angular 2.0 RC

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

Ответ 2

Я не уверен, почему все здесь пытаются запутаться с @HostListener. Это определенно необходимо при работе со событиями на уровне страницы, но не с дочерними элементами. Вместо перехода с привязкой события стиля JQuery вы можете использовать Angular 2 прослушивателя событий. Если вы работаете с внутренним-div, все, что вам нужно сделать, это добавить прослушиватель событий прокрутки в свой div с помощью метода обратного вызова, например:

HTML:

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

</div>

TypeScript:

onScroll(event): void {

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

Ответ 3

Самый простой способ добавить вручную EventListner

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

"Истина" в конце говорит браузеру, чтобы он регистрировал событие при отправке, даже если это событие обычно не пузырится, например изменение, фокусировка и прокрутка.

Нельзя использовать параметр useCapture для @HostListener или renderer.listen.

Не забудьте удалить этот прослушиватель, когда вы уничтожаете компонент.

Ответ 4

Основываясь на этой 'in-viewpoint' Директиве, вы можете присоединить к пользовательским элементам:

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