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);
  }
}

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

1 个答案: