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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!