Question

我的要求是我希望在某些向上滚动后修复表头，而表体正在滚动。

我的app.html在下面。

  <table class="table table-fixed-ok" #scroller  [class.fixed]="fixed">
                      <thead >
                          <tr class="row-hor-heading">
                              <th colspan="3" scope="row"><span class="bank-name">
                           {{offer.name}}</span>
                          </tr>
                      </thead>
                      <tbody>
                          <tr class="row-2-data bg-white">

                          </tr>
                    </tbody>
</table>

所以我想只听这个表的滚动（app.html包含更多其他div.i想要听这个div滚动。）

我的app.ts部分位于

之下

@HostListener('window:scroll', ['$event'])
     onWindowScroll(event: Event) {
     debugger;
     let num = this.el.nativeElement.querySelector('.table-fixed-ok').scrollTop;
     if ( num >50 ) {
            this.fixed = true;
          }else if (this.fixed && num < 5) {
           this.fixed = false;
          }
}

但是这不是我需要的。虽然打印num变量总是给0.然后它也会触发整个整体滚动。如何解决这个问题。请给我一个解决方案。

Answer 1

无法为@HostListener()指定元素，但您可以直接将事件绑定应用于元素，如：

<div (scroll)="myScrollHandler($event)"

HostListner与模板Angular4中的特定元素？

1 个答案: