vue实现文字上下滚动效果

需求描述

一个提示功能，可能有多条数据需要显示，但是展示的地方最多显示3条，要求当返回的数据超过3条，就通过上下滚动显示。鼠标移入停止滚动，鼠标移出继续滚动。

问题分析

展示区高度固定，信息列表高度是根据数据条数计算的，可以通过定位，然后修改信息列表的 top 值来实现滚动效果，滚动的最大高度 pos 就是 信息列表的高度 - 展示区高度。

设置一个定时器，每一步step叠加移动1px，当移动的距离等于pos的时候，step设置为0，从新开始滚动。

但是有个问题：每次step设置为0，定位就跳到第一条，会出现跳跃感，解决方法就是，将数据前三条push到list中，增加三条冗余数据，这样每次滚动到最大高度在跳转后页面跳跃感就消失了。

问题解决

<div class="container" @mouseenter="clearTimer" @mouseleave="scroll">
    <div class="box">
    	<p v-for="(tip, index) in tips" :key="index">{{ tip.desc }}</p>
    </div>
</div>

// 获取列表数据
getTips() {
  list().then(res => {
    let data = res.data
    
    // 超过3条时，增加冗余数据，调用滚动方法
    if (data.length > 3) {
      let pre3 = chunk(data, 3)[0]
      data.push(...pre3)
      this.tips = data

      this.$nextTick(() => {
        this.scroll()
      })
    } else {
      this.tips = data
    }
  })
},

// 滚动动画   
scroll() {
  let box = document.querySelector('.box')
  let height = box1.clientHeight
  let pos = height - 75
  
  this.clearTimer()
  this.timer = setInterval(() => {
    if (this.step < pos) {
      box.style.top = -this.step + 'px'
      this.step++
    } else if (this.step === pos) {
      this.step = 0
    }
  }, 50)
},

// 清除定时器
clearTimer() {
  clearInterval(this.timer)
}