vue监听滚动条实现 header显示title addEventListener的坑

最新推荐文章于 2024-03-14 18:01:56 发布

webberQian

最新推荐文章于 2024-03-14 18:01:56 发布

阅读量348

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40628308/article/details/106011899

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

问题所在

在d2Admin框架中使用addEventListener监听scroll的问题如下图：

在这里插入图片描述
从上面图中可以看出，但我刷新浏览器的时候用addEventListener监听的scroll事件是又用的，但我通过路由跳转到这个页面时，是不能实现这个效果的 $\color{#FF3030}{（原因不详）}$ 代码如下：

mounted () {
    let boxBody = document.getElementsByClassName('d2-container-full__body')
    this.boxBody = boxBody
    boxBody[0].addEventListener('scroll', this.boxScroll) //路由跳转就不调用这个this.boxScroll这个函数    console.log('======================1') //不论是刷新还是路由跳转都执行到这里面来
  },
destroyed () {
    console.log(this.boxBody[0].removeEventListener, '>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
    this.boxBody[0].removeEventListener('scroll', this.boxScroll)
  },
methods: {
    boxScroll (boxBody) { //在刷新的时候执行了，，路由跳转的时候没有执行
      console.log('++++++++++++++++++++++1')
      if (document.getElementsByClassName('loanApplication')[0].offsetTop - boxBody.target.scrollTop <= 0) {
        this.title = document.getElementsByClassName('dksqInfo')[0].innerText
      } else {
        this.title = ''
      }
      document.getElementsByClassName('el-collapse-item__header').forEach((item) => {
        if (item.offsetTop - boxBody.target.scrollTop <= 0) {
          this.title = item.innerText
        }
      })
    }
  }

解决办法

这里我就不适用addEventListener来监听scroll事件，使用@scroll直接绑定在原生上面
效果如下：
在这里插入图片描述
代码如下：

<d2-container @scroll="scrollLine()"></d2-container>
methods: {
    scrollLine () {
      let boxBody = document.getElementsByClassName('d2-container-full__body')
      this.boxBody = boxBody
      this.boxScroll(this.boxBody[0])
      console.log('======================1')
    },
    boxScroll (boxBody) {
      console.log(boxBody.scrollTop, '++++++++++++++++++++++1')
      if (document.getElementsByClassName('loanApplication')[0].offsetTop - boxBody.scrollTop <= 0) {
        this.title = document.getElementsByClassName('dksqInfo')[0].innerText
      } else {
        this.title = ''
      }
      document.getElementsByClassName('el-collapse-item__header').forEach((item) => {
        if (item.offsetTop - boxBody.scrollTop <= 0) {
          this.title = item.innerText
        }
      })
    }
  }

既然都做的了这里为了验证到底是谁的问题我又在vue里面使用了静态路由测试了一下addEventListener监听scroll又没有问题（不适用d2admin与动态路由）
在这里插入图片描述
代码如下：

<template>
  <div class="about">
    <h1></h1>
    <div class="cls">
      <br>
      <br>
      <br>
      <br>
      <br>
      测试
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>测试
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>测试
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>测试
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>测试
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>测试
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>测试
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
</template>
mounted () {
    let cls = document.getElementsByClassName('cls')
    this.cls1 = cls[0]
    console.log(this.cls)
    this.cls1.addEventListener('scroll', this.boxScroll)
    console.log('======================')
  },
  beforeDestroy () {
    console.log(this.cls1)
    this.cls1.removeEventListener('scroll', this.boxScroll)
  },
  methods: {
    boxScroll () {
      console.log('++++++++++++++++++++++++++')
    },
  }