Implement infinite scrolling of table

<template> 
  <div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut"> 
    <table class="totall"> 
      <tr class="title">
        <th v-for="itemx in liData" :key="itemx">{ { itemx }}</th>  
      </tr>
    </table>        
    <div ref="moocBox" class="wrapper2">          
      <table :class="{ marquee_top: animate }">              
        <tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">                  
          <td v-for="itemz in itemy" :key="itemz">{ { itemz }}</td>                 
        </tr>              
        <tr v-for="itemy in listData" class="rollData" ref="con2" :key="itemy">                  
          <td v-for="itemz in itemy" :key="itemz">{ { itemz }}</td>                 
        </tr>             
      </table>          
    </div>      
  </div>
</template> 
<script>
export default {   name: "Profile",    data() {     return {       animate: false,        liData: ["key categories", "sales amount", "year-to-week ratio", "achievement rate"],        listData: [         ["FM ", "53.647", "-33.76", "86.15%"],         ["A", "53.647", "-33.76", "86.15%"],         ["B", "53.647", "-33.76", "86.15%"],         ["C", "53.647", "-33.76", "86.15%"],         ["D", "53.647", "-33.76", "86.15%"],







 

 

 

 

 
        ["E", "53.647", "-33.76", "86.15%"],
 
        ["F", "53.647", "-33.76", "86.15%"],
 
        ["G111", "53.647", " -33.76", "86.15%"],
      ], 
      speed: 50, 
      myScroll: null, 
      iliHeight: 26, 
      time: null, 
      delay: 20,
    };
  },
 
  methods: {     //Scroll     scrollUp() {       this.$refs .moocBox.scrollTop++;         // console.log(this.$refs.moocBox);       if (this.$refs.moocBox.scrollTop >= this.$refs.moocBox.scrollHeight / 2) {         //Judge whether the condition is critical         this.$refs.moocBox.scrollTop = 0;       } else {

 





 


        this.$refs.moocBox.scrollTop++;
      }
    }, // Mouse over to pause scrolling
 
    mouseOver() {       clearInterval(this.myScroll);     }, // Mouse out and re-scroll     mouseOut() {       this.myScroll = setInterval(         ( ) => {           this.$refs.moocBox.scrollTop++;            this.scrollUp();         },          this.speed       );     },   },   components: {},   computed: {},   created() {},   mounted() {     this.myScroll = setInterval(() => {       this.$refs.moocBox.scrollTop++;        this.scrollUp();     }, this.speed);


 










 

 

 

 





  },
 
  activated() {},
 
  deactivated() {},
 
  beforeDestoryed() {
    clearInterval(myScroll); 
    this.myScroll = null;
  },
};
</script>
 
<style scoped>
.wrapper {
  overflow: hidden; 
  height: 220px;
}
 
.wrapper2 {
  height: 180px; 
  overflow: hidden;
}
 
table {
  border-collapse: collapse;
  border-spacing: 0; 
  table-layout: fixed;

  background-color: rgb(2,  25,  80); 
  width: 100%; 
  color: rgb(141, 35, 35);
}
 
tabletr {
transition: all 2s ease .3s;
}
 
.marquee_top  {
      transition: all 0.5s ease-in-out; 
      margin-top: -26px;
}
 
.title  {
    height: 40px; 
    line-height: 40px; 
    text-align: center;
}
 
th {
     padding: 5px 10px; 
     width: 25%;
}
 
td {
     padding: 4px 10px; 
     width: 25%;
}
 
table th {
    text-align: center;
}
 
table tr td  {
    width: 25%; 
    text-align: center;
} 
.rollData  {
    font-size: 16px;
}
</style>