第一种方法

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

<thead><tr><th style="position: relative;" [style.top]="columnTop"><span>Item</span></th><th style="position: relative;" [style.top]="columnTop"><span>Delivery</span></th><th style="position: relative;" [style.top]="columnTop"><span>Material</span></th><th style="position: relative;" [style.top]="columnTop"><span>Description</span></th><th style="position: relative;" [style.top]="columnTop"><span>Picked Qty</span></th><th style="position: relative;" [style.top]="columnTop"><span>UoM</span></th></tr></thead>

第二种方法

HTML:

<div (scroll)="onScroll($event)"></div>

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