关于大屏列表过长时事项列表向上滚动

//=========================html部分======================
//用来存放列表的总盒子
  <div class="leftBody-body" style="overflow: hidden">
//列表所在盒子主要就是让这个盒子向上滚动
        <div class="left-list-body" :class="{ anim: animate }">
//列表项
          <div
            class="leftBody-body-list"
            v-for="(item, index) in deviceList"
            :key="index"
            @click="endFun(item)"
          >
            <p class="leftList-name">{{ item.name }}</p>
            <p class="leftList-num">序列号: {{ item.deviceId }}</p>
          </div>
        </div>
      </div> 

//======================js方法部分=================
//首先获取列表
async selectEquipGantryPage() {
      const data = await screenHttp.selectEquipGantryPage({
        projectId: this.projectId,
        pageSize: 999,
        pageNum: 1,
        name: '',
      })
      if (data.data.code == 200) {
        console.log('龙门吊设备列表接口信息--->', data)
        this.deviceList = data.data.data.pageInfo.list
        console.log('龙门吊设备列表--->', this.deviceList)
        if (this.deviceList.length > 0) {
        //判断列表哦长度如果不为空就执行对动画的处理函数
          this.timer = setInterval(this.scroll, 2000)
        }
      }
    },
//动画处理函数
    scroll() {
//对列表长度进行判断如果长度达到需要滚动的程度就执行代码
      if (this.deviceList.length > 12) {
        console.log('动画a')
//this.animate就是用来给列表添加动画动态class的变量，当列表长度达到要求时就将其赋值为true
//使其加上有动画效果的class
        this.animate = true
        setTimeout(() => {
          this.deviceList.push(this.deviceList[0])
          this.deviceList.shift()
          this.animate = false
        }, 1200)
      } else {
        window.clearInterval(this.timer)
      }
    },
//=======================css部分=================
.anim {
//这个数值设置为一个列表项的高度那么当滚动方法执行一次时列表就会向上滚动一个列表项的距离
  margin-top: -3.52vw;
  transition: all 1s;
}