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






ngOnInit(): void {
    this.columnTop = '0';
    Observable.fromEvent(window,'scroll').subscribe((event) => {
      this.onWindowScroll();
    });
}
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:


TypeScript:



也有这样的







                    
<div (scroll)="onScroll($event)"> </div>onScroll(event): void { // Interpret the scroll event// Do stuff on inner div scroll}exportclass YourComponent @HostListener('scroll',['$event'])private onScroll($event:Event): console.logsrcElementscrollLeft $eventscrollTop);};}