滚动事件未在元素 div 上触发

Question

我在 Angular 组件的模板中有一个 div。在 div 上，我试图获取 div 的滚动位置。

   <div class="data-input" (scroll)="onScroll($event)">Accepted Qty....</div>

html 元素看起来像这样。

在 TS 文件中我有一个函数

 onScroll(event) {
    console.log(event);
}

但是这个功能没有命中。

我已经试过了

@HostListener('scroll', ['$event'])
 onScroll(event) {  ...}

但这在页面滚动时有效。我想在 html 元素（div）滚动时触发滚动事件。

Answer 1

您可以尝试通过ElementRef 和Renderer 进行操作。我为您起草了一个单独的可滚动组件来演示这个概念：

import {Component, OnInit, OnDestroy} from '@angular/core';
import {ElementRef, Renderer2} from '@angular/core';

@Component({
  selector: 'my-scroll',
  template: '<div>Accepted Qty....</div>'
})

export class MyScrollComponent implements OnInit, OnDestroy {

  onScrollListener: Function;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
  }

  ngOnInit() {
    this.onScrollListener = 
        this.renderer.listen(this.elementRef.nativeElement, 'scroll', this.onScroll);
  }

  ngOnDestroy() {
    this.onScrollListener();
  }

  onScroll(event) {
    console.log(event);
  }
}