Angular 4_监听滚动条(用来锁定行)

 第一种方法

import { ActivatedRoute } from '@angular/router';
import { DOCUMENT } from '@angular/platform-browser';

subscribeScoll: any;




ngOnInit(): void {
    this.columnTop = '0';
    
    this.subscribeScoll = Observable.fromEvent(window, 'scroll')
      .debounceTime(50) // 防抖
      .subscribe((event) => {
        this.onWindowScroll();
      });
}
// 组件销毁时取消订阅事件，防止出现页面多次执行之后卡顿
 ngOnDestroy() {
    this.subscribeScoll.unsubscribe();
  }

onWindowScroll() {
    this.columnTop = (window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop) + 'px';
  }

 
      
        Item
        Delivery
        Material
        Description
        Picked Qty
        UoM
      
    

 

 

 

第二种方法

 

HTML:

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

TypeScript:

onScroll(event): void {

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

也有这样的

 

 

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