动态实现无缝滚动，包括纯js和vue两种方式

可视框里可以放n个
实际数据有m个
在实际数据后面复制加n个

@keyframes move123 {
  0% {
    top: 0%;
  }
  100% {
    top: -(m-n)/n%
  }
}


animation: move123 15s linear 0s infinite;

 .jps_container:hover {
                        animation-play-state: paused;
                    }

css消除滚动条
::-webkit-scrollbar{display:none}

在数据渲染完毕后获取高度，动态添加css实现无缝滚动

let height=$('.liebiao_main').height()
const styleEl = document.createElement('style');
let min_height=height-192
styleEl.type = 'text/css';
styleEl.innerHTML = `
  @keyframes move111 {
    0% {
    top: 0%;
  }
  100% {
    top: -`+min_height+`px;
  }
  }
`;
if(height<190){
$('.liebiao_main').css('animation','')
}else{
  
let bili=height/16
$('.liebiao_main').css('animation','move111 '+bili+'s linear 0s infinite')
}

document.head.appendChild(styleEl);
})

下面是vue中怎么让el-table无缝滚动

 <el-table
              :data="daozha_data.list"
              height="567px"
              style="width: 100%; background: transparent"
              row-class-name="tableRowClassName"
              header-cell-class-name="headerCellClassName"
              ref="table"
              @mouseenter.native="mouseEnter"
              @mouseleave.native="mouseLeave"
              header-row-class-name="headerCellClassName"
              cell-class-name="cellClassName"
            >
             </el-table>

//首先data中定义，方便全局使用
  rolltimer: '',
  //为防止数据刷新时滚动混乱添加防抖函数
  debounceTimer:''

      autoRoll(stop) {
       if (this.debounceTimer) {
            clearTimeout(this.debounceTimer);
          }
          if (stop) {
                        //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
                        window.clearInterval(this.rolltimer)
                    } else{
                       //防抖
           this.debounceTimer = setTimeout(() => {
      //注意：这里只用获取ref对应的table即可 下方的bodywrapper不用修改
                    const table = this.$refs.table
                    // 拿到表格中承载数据的div元素
                    const divData = table.$refs.bodyWrapper
                    console.log(table, divData);
                   
                    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
                    this.rolltimer = window.setInterval(() => {
                            // 元素自增距离顶部1像素
                            divData.scrollTop += 2
                            console.log(divData.clientHeight + divData.scrollTop, divData.scrollHeight);
                            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                            if (//这里加5的原因是各种浏览器的精度可能不一致但误差小于5
                                divData.clientHeight + divData.scrollTop+5 >=
                                divData.scrollHeight
                            ) {
                                // 重置table距离顶部距离
                                divData.scrollTop = 0
                                // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
                                // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
                            }
                        }, 50) // 滚动速度
                     }, 1000);
                    }
       
                },
                // 鼠标进入
                mouseEnter() {
                    // 鼠标进入停止滚动和切换的定时任务
                    this.autoRoll(true)
                },
                // 鼠标离开
                mouseLeave() {
                    // 开启
                    this.autoRoll()
                },

调用

 getexpirelist(type) {
          // expirelist

          clearInterval(this.rolltimer2);
          this.autoRoll2(true);
          Cockpit.GetPatrolPagedList({
            type: type,
            pageIndex: 1,
            pageSize: 30,
          }).then((res) => {
            if (res.ok) {
              let result = res.data;
              this.expirelist = result.list;

              const table = this.$refs.table2;

              const divData = table.$refs.bodyWrapper;
              divData.scrollTop = 0;

              this.autoRoll2();
            }
          });
        },

//通常先执行
 this.$nextTick(() => { //在数据加载完，重新渲染表格
                        this.$refs['table'].doLayout();
                    })
//这样可以防止数据渲染导致的样式混乱
//之后调用
  window.clearInterval(this.rolltimer) //这是为了防止多重滚动叠加导致滚动速度越来越快
                            this.autoRoll()

欢迎各位补充