h5 table自动滚动的方法

1.使用liMarquee插件
liMarquee 是一款基于 jQuery 的无缝滚动插件，可以应用于任何 Web 元素，包括文字、图像、表格、表单等元素，可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等
具体代码如下：

 

<link rel="stylesheet" href="/css/liMarquee.css">
<script src="/js/jquery-1.9.0.min.js"></script>
<script src="/js/jquery.liMarquee.js"></script>

<div class="scrollDiv">无缝滚动插件</div>

$(function(){
    $('.scrollDiv').liMarquee();
});

 function tableScroll() {
    $('.scrollTbody').liMarquee({
        direction: 'up', //向上滚动
        runshort: false, //内容不足时不滚动
        scrollamount: 20, //速度
    });
}

2.使用定时器

timers: null,

const table = this.$refs.table;

      // 拿到表格中承载数据的div元素

      const divData = table.bodyWrapper;

      clearInterval(this.timers);

      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)

      this.timers = setInterval(() => {

        // 元素自增距离顶部1像素

        divData.scrollTop += 1;

        if (this.level == divData.scrollTop) {

          divData.scrollTop = 0;

        }else{

          this.level = divData.scrollTop

        }

        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)

        if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {

          // 重置table距离顶部距离

          divData.scrollTop = 0;

        }

      }, 60);  // 滚动速度

3.使用自定义