【vue 实现表格上下平滑滚动 完整代码】

<template>
  <div class="Search">
    <!--    利用  ul+li  设置平滑滚动-->
    <div class="mainBox">
      <div class="topTit">
        <P>这是标题</P>
      </div>
      <div class="tit">
        <span class="titSpan">魏国</span>
        <span class="titSpan">蜀国</span>
        <span class="titSpan">吴国</span>
        <span class="titSpan">群国</span>

      </div>
      <div id="review_box" @mouseover="rollStop()" @mouseout="rollStart(60)">
        <ul id="comment1">
          <li v-for="item in tableData" :key="item.Id" class="list-style">
            <div class="item-style">
              <span class="comSpan">{{ item }}</span>
              <span class="comSpan">{{ item }}w</span>
              <span class="comSpan">{{ item }}k</span>
              <span class="comSpan">{{ item }}%</span>
            </div>

          </li>
        </ul>
        <ul id="comment2">
          <li v-for="item in tableData" :key="item.Id" class="list-style">
            <div class="item-style">
              <span class="comSpan">{{ item }}</span>
              <span class="comSpan">{{ item }}w</span>
              <span class="comSpan">{{ item }}k</span>
              <span class="comSpan">{{ item }}%</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

export default {
  name: "SearchRate",
  data() {
    return {
      tableData: '',
      timer: null,

    }
  },
  mounted() {
    //获取数据
    this.getcdl()

    this.roll(60);


  },

  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
  },
  methods: {
    //  平滑滚动设置
    roll(t) {


      let ul1 = document.getElementById("comment1");
      let ul2 = document.getElementById("comment2");
      let ulbox = document.getElementById("review_box");
      // console.log(ul1)
      // console.log(ul2)
      ul2.innerHTML = ul1.innerHTML;
      ulbox.scrollTop = 0;
      this.rollStart(t);
    },
    rollStart(t) {
      // console.log("鼠标出去了")
      let ul1 = document.getElementById("comment1");
      let ul2 = document.getElementById("comment2");
      let ulbox = document.getElementById("review_box");
      this.rollStop();
      this.timer = setInterval(() => {
        // 当滚动高度大于列表内容高度时恢复为0
        if (ulbox.scrollTop >= ul1.scrollHeight) {
          ulbox.scrollTop = 0;
        } else {
          ulbox.scrollTop++;
        }
      }, t);
    },
    rollStop() {
      // console.log("鼠标进来了")
      clearInterval(this.timer);
    },
    getcdl() {
      let cdlGetData = CDLGETDATA()
      cdlGetData.then(res => {
        // console.log("111111", res.cdldata)
        this.tableData = res.cdldata
        // console.log("2222222", this.tableData)

      })

    }

  },


}

样式

<style scoped>
* {  padding: 0;  margin: 0;}.
Search {  
width: 100%;  height: 215px;  
/*border: 1px solid seagreen;*/ 
 background-color: rgb(43, 69, 145);
}
.mainBox {
  width: 100%;  height: 100%;
}
.topTit {  
width: 100%;  height: 40px;  
/*padding-top: 1%;*/}
.topTit p { 
 font-size: 20px; 
 color: rgb(14, 228, 249); 
 line-height: 40px;  
margin-left: 5%; 
 text-align: left;}
.tit { 
 width: 90%;  
height: 40px;  
display: flex;  
justify-content: space-around;  
/*align-content: center;*/  
/*border: 1px solid red;*/  
margin: 0 auto;  color: #fff;  font-size: 15px;  font-weight: bold;  background-color: rgb(8, 27, 86);  opacity: 0.5;}
.titSpan {  text-align: center;  line-height: 40px;}
#review_box {  width: 90%;  height: 120px; /* 必须 */  overflow: hidden; /* 必须 */  margin: 1% auto;}
ul {  width: 100%;}
.item-style {  width: 100%;  height: 100%;  display: flex;  justify-content: space-around;  align-content: center;}
li {  width: 100%;  height: 30px;  /*background-color: mediumvioletred;*/  /*opacity: 0.3;*/}
.comSpan {  width: 25%;  line-height: 30px;  text-align: center;  color: #fff;}
span {  text-align: center;  margin-left: 5px;}
/*偶数行*//*
.list-style:nth-child(odd) > .item-style {*//*  background-color: saddlebrown;*//*  opacity: 0.3;*//*}*//*奇数行*/.list-style:nth-child(even) > .item-style {  /*background-color: gray;*/  background-color: rgb(34, 55, 116);  opacity: 0.5;}</style>