滚动事件不在元素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); 
    } 
}