Angular4_div 监听scroll事件

最新推荐文章于 2020-12-19 10:21:12 发布

Martin_Yelvin

最新推荐文章于 2020-12-19 10:21:12 发布

阅读量7.5k

点赞数

分类专栏： Angular2.x 前端技巧

本文链接：https://blog.csdn.net/qq_36279445/article/details/80927741

版权

前端同时被 3 个专栏收录

142 篇文章 0 订阅

订阅专栏

Angular2.x

118 篇文章 2 订阅

订阅专栏

技巧

90 篇文章 4 订阅

订阅专栏

scroll 事件，一个是window的，另一个不是。- -

完成效果：

 // handle host scroll
  @HostListener('scroll', ['$event']) public scrolled($event: Event) {
    this.elementScrollEvent($event);
  }

  // handle window scroll
  @HostListener('window:scroll', ['$event']) public windowScrolled($event: Event) {
    this.windowScrollEvent($event);
  }

这俩指令，基本上就解决了。

我是用来做table锁定表头的

table 外套的div加

 
 detect-scroll ( 
 onScroll)= 
 "handleScroll($event)" 

事件：

public handleScroll(event: ScrollEvent) {
    this.columnTop = this.el.nativeElement.querySelector('#tbl').scrollTop + 'px';
    if (event.isReachingBottom) {
      console.log(`the user is reaching the bottom`);
    }
    if (event.isReachingTop) {
      console.log(`the user is reaching the top`);
    }
    if (event.isWindowEvent) {
      console.log(`This event is fired on Window not on an element.`);
    }

  }

建议去看源码：

点击打开链接