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