vue中scroll监听页面滚动、移除监听。

陌~上花开

已于 2023-07-12 16:47:14 修改

阅读量1.3k

点赞数

分类专栏： vue js算法文章标签： vue.js scroll

于 2023-07-12 14:41:22 首次发布

本文链接：https://blog.csdn.net/weixin_45803990/article/details/131681312

版权

vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

js算法

19 篇文章

订阅专栏

该文章讲述了如何使用JavaScript的`addEventListener`监听页面滚动事件，并通过设置定时器优化性能。当滚动位置超过52像素时，背景色变为白色，否则为浅灰色。同时，展示了如何使用`removeEventListener`移除监听器和`clearTimeout`清除定时器。

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

添加监听

  document.addEventListener("scroll", this.pageScroll); //监听页面滚动

    pageScroll() {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(this.scroll(), 300)
    },
    scroll() {
      this.$nextTick(() => {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 52) {
          this.background = '#fff'
        } else {
          this.background = '#F7F8FA'
        }
      })
    },

移除监听

 document.removeEventListener('scroll', this.pageScroll)

 clearTimeout(this.timer)