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.使用自定义

<script type="text/javascript">
        //window.setInterval("g('div_time').innerHTML=getNowFormatDate();",1000);
        var userAgent = navigator.userAgent.toLowerCase();
let intervals = {};

        function resize() {
            var curWidth = document.documentElement.clientWidth;
            var curHeight = document.documentElement.clientHeight;
            var s1 = curWidth / 1920;
            var s2 = curHeight / 1080;
            var scale = (s1 > s2 ? s2 : s1);

            if (userAgent.indexOf("firefox") != -1) {

                //-moz-transform:scale(0.66);

                document.body.style.MozTransform = "scale(" + scale + ")";
            }
            else {
                document.body.style.transform = "scale(" + scale + ")";
            }
        }
        resize();
        $("#loading").show();

        function load_data() {
            //GetJsonByUrl2("data.json", get_html);
            GetJsonByUrl2("getData_board.ashx", get_html);
            
           // get_html(data_json);
          // setTimeout(load_data(), 60000)
          setTimeout("load_data()", 60000)
        }

        function get_html(d) {
            $("#loading").fadeOut(2000);
                $("#deptlogo").attr('src',"../../../../logos/"+d.DEPTLOGO);
 
            get_C1_R1(d);
            get_C1_R2(d);
            get_C2_R1(d);
            get_C2_R2(d);
            get_C2_R3(d);
            get_C3_R1(d);
            get_C3_R2(d);
            get_C3_R3(d);
if(d.v4.length>5){
setTableRoll("testTable");
$("#testTable").hover(function() {
                clearInterval(intervals['testTable'])
            }, function() {
                setTableRoll("testTable")
            })
}
            //setTimeout(load_data(), 600000)
        }
function setTableRoll(divName) {
            console.log(divName);
            intervals[divName] = setInterval(function() {
                let tbodyDom = $("#" + divName).find("tbody"), trDom = tbodyDom.find('tr:first'), trHeight = trDom.height();
                tbodyDom.animate({
                    // marginTop: -trHeight+'px'
                }, 600, function() {
                    // tbodyDom.css('marginTop', 0);
                    trDom.css("marginTop", 0).appendTo(tbodyDom);
                })
            }, 3000)
        }
        function get_C2_R2(d) {
                     var h = "<div style='position:absolute;left:0px;width:800px;text-align:center;color:white;font-size:16px;'>库存总数："+d.data8+"件</div>";
            h+="<div style='width:100%;padding-bottom:10px;text-align:right;color:white;'>" + d.t4 + "</div>";

            h += "<table class='table2_2' id='testTable'><thead>";
            h += "<th class='td3'>库位</th><th class='td3'>品种</th><th class='td3'>款式</th><th class='td3'>颜色</th><th class='td3'>数量</th><th class='td3'>itemCode</th></thead> "
            var ii;
            for (var i = 0; i < d.v4.length; i++) {
                h += "<tr>";
                for (ii = 0; ii < 6; ii++)
                    h += "<td class='td2'>" + d.v4[i][ii] + "</td>";

                h += "</tr>";

            }
            h += "</table>";

            document.getElementById("div_c2_r2").innerHTML = h;
        }