【vue】实现页面自动滚动效果

data中定义

scrollTimer: null, // 滚动定时器
pauseTimer: null, // 暂停定时器
scrollDirection: 'down' // 滚动方向 up向上 down向下

需要自动滑动的div

<div id="printBox">
</div>

 mounted() {
   this.dataCompleteFun()
  },
  destroyed() {
    // 清理定时器
    clearTimeout(this.pauseTimer)
    this.pauseTimer = null
    clearInterval(this.scrollTimer)
    this.scrollTimer = null
    // 清理点击监听
    window.document.removeEventListener('click', this.pauseScroll)
  },
   // 数据加载完成方法
    dataCompleteFun() {
      // 开启滚动
      console.log('开始滚动');
      this.autoScroll()
    },
    autoScroll() {
      const scrollHeight = document.getElementById('printBox').scrollHeight
      const clientHeight = document.getElementById('printBox').clientHeight
      const scroll = scrollHeight - clientHeight
      // 滚动长度为0
      if (scroll === 0) {
        return
      }
      // 触发滚动方法
      this.scrollFun()
      // 去除点击监听
      window.document.removeEventListener('click', this.pauseScroll)
      // 重设点击监听
      window.document.addEventListener('click', this.pauseScroll, false)
    },
    pauseScroll() {
      // 定时器不为空
      if (this.scrollTimer) {
        // 清除定时器
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
        // 一秒钟后重新开始定时器
        this.pauseTimer = setTimeout(() => {
          this.scrollFun()
        }, 2000)
      }
    },
    scrollFun() {
      // 如果定时器存在
      if (this.scrollTimer) {
        // 则先清除
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
      this.scrollTimer = setInterval(() => {
        const scrollHeight = document.getElementById('printBox').scrollHeight
        const clientHeight = document.getElementById('printBox').clientHeight
        const scroll = scrollHeight - clientHeight
        // 获取当前滚动条距离顶部高度
        const scrollTop = document.getElementById('printBox').scrollTop
        console.log('scrollTop',scrollTop);
        // 向下滚动
        if (this.scrollDirection === 'down') {
          // 滚动速度
          const temp = scrollTop + 10
          document.getElementById('printBox').scrollTop = temp // 滚动
          // 距离顶部高度  大于等于 滚动长度
          if (scroll <= temp) {
            // 滚动到底部 停止定时器
            clearInterval(this.scrollTimer)
            this.scrollTimer = null
          }
        }
      }, 150)
    }