Angular中监控DIV层中的scroll事件

最新推荐文章于 2025-04-10 18:31:41 发布

今天也要暴富啊

最新推荐文章于 2025-04-10 18:31:41 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js代码前端代码文章标签： angular scroll div

本文链接：https://blog.youkuaiyun.com/qq_41590018/article/details/88188728

前端代码同时被 2 个专栏收录

20 篇文章

订阅专栏

js代码

16 篇文章

订阅专栏

本文详细介绍了如何在Angular中利用ngAfterViewInit和ngOnDestroy生命周期钩子，结合addEventListener方法监听和移除DOM元素的scroll事件，实现高效且响应式的滚动事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、先添加 angular 生命周期钩子：

ngAfterViewInit() 钩子是在组件视图或者子组件视图初始化完成之后调用。
ngOnDestroy() 钩子是当 Angular 每次销毁指令 / 组件之前调用。

  ngAfterViewInit() {
    this.ngScroll();
  }

  ngOnDestroy() {
    this.rmScroll();
  }

2、ngScroll() 方法添加 addEventListener 监测 DIV层的scroll事件：

ngScroll() {
    let _scroll = document.querySelector('.news-box').children[0];
    _scroll.addEventListener('scroll', () => {
      let scrollTop = document.querySelector('.news-box').children[0].scrollTop;
      if (scrollTop > 150) {
        //执行事件
      } else {
        //执行事件
      }
    });
  }

3、rmScroll() 方法用于移除由 addEventListener() 方法添加的事件句柄：

rmScroll() {
    let targetScroll = document.querySelector('.news-box').children[0];
    targetScroll.removeEventListener('scroll', this.ngScroll);
  }