Vue 表格循环滚动，鼠标移入暂停，移出继续滚动

简单例子：

<template> 中的代码：

<div 
  id="chart"
  ref="chart"
  class="table-body"
  @mouseenter="tableMouseOver"
  @mouseleave="tableMouseOut"
>
  <div class="row" v-for="(item,index) in tableList" :key="index">
    <div class="item">{{item.name}}</div>
    <div class="item">{{item.value}}</div>
    <div class="item">{{item.times}}</div>
  </div>
</div>

 data() 中的代码：

data() {
  return {
    tableList: [
      { name: "潘家小镇电影馆",value:"50", times: "2022-05-02" },
      { name: "党员活动",value:"38", times: "2022-08-01" },
      { name: "潘家小镇美丽游",value:"120", times: "2022-08-23" },
    ],
    //定时器名称
    timers: null,
  };
},

methods: {} 中的代码：

//滚动
tableScroll() {
  let that = this;
  clearInterval(this.timers);
  this.timers = setInterval(() => {
    let ContScroll = that.$refs.chart;
    //获取当前滚动上去的高度
    that.currentScrollTop = parseInt(ContScroll.scrollTop);
    //获取容器可视化高度
    let currentBoxHeight = parseInt(ContScroll.scrollHeight);
    if (
      currentBoxHeight - ContScroll.offsetHeight <=
      that.currentScrollTop
    ) {
      // 从头开始滚动
      // 暂停滚动,让"近30天流出人员去向地及数量"列表开始滚动
      that.currentindex = 0;
      ContScroll.scrollTo(0, 0);
    } else {
      that.currentindex++;
      ContScroll.scrollTo({ top: that.currentindex, left: 0 });
    }
  }, 100);
},
// 鼠标移出
tableMouseOut() {
  if (this.isScroll) {
    this.tableScroll();
    let ContScroll = this.$refs.chart;
    //获取当前滚动上去的高度
    this.currentindex = parseInt(ContScroll.scrollTop);
  }
},
// 鼠标移入
tableMouseOver() {
  clearInterval(this.timers);
},

beforeDestroy() {} 中的代码：

beforeDestroy() {
  clearInterval(this.timers);
}