table 实现自动滚动

======JS=======
$(function (){

       let text = $("#fTbody:first");
            let clear; //定义需要清除动画的部分
            $("#fTbody>tr:odd").addClass("odd");
            //添加鼠标悬停事件
            text.hover(function () {
                clearInterval(clear);
            }, function () {
                clear = setInterval(function () {
                    let findText = text.find("tr:first");
                    let textHeight = findText.height();
                    text.animate({
                        easing: 'linear',
                        iterations: 'Infinity',
                        marginTop: -textHeight + "px"
                    }, 1000, function () {
                        //清除margin值
                        findText.css("marginTop", 0).appendTo(text);
                        text.css("marginTop", 0);
                    })
                }, 1000) //滚动间隔时间
            }).trigger("mouseleave");

}）

　　

//通过JS将数据赋值
var data = [
        { "Img": "img/police/nan.jpg", "code": "赵鹏", "CreateTime": "" },
        { "Img": "img/police/nv.jpg", "code": "王晴", "CreateTime": "" },
        { "Img": "img/police/nan.jpg", "code": "李立", "CreateTime": "" },
        { "Img": "img/police/nv.jpg", "code": "夏雨", "CreateTime": "" },
        { "Img": "img/police/nan.jpg", "code": "柳树", "CreateTime": "" },
        { "Img": "img/police/nv.jpg", "code": "赵砚", "CreateTime": "" },
        { "Img": "img/police/nan.jpg", "code": "王三小", "CreateTime": "" },
        { "Img": "img/police/nv.jpg", "code": "王三一", "CreateTime": "" }
    ];
var _html = "<table style='font-size: 14px;width:100%;margin-top:1%'>" +
        "<tbody id='fTbody'>"; +
        "<tr class='Freezing_tdd'><th style='width:30%'>警员照片</th>" +
        "<th style='width:30%'>警员姓名</th>" +
        "<th style='width:30%'>警员职务</th>" +
        "</tr>";
    for (var i = 0; i < data.length; i++) {
        _html += "<tr>" +
            "<td style='text-align:center;width:30%;'>"
            + "<img style='width:20%;height:6%;' src='" + data[i].Img + "'></td>"
            + "<td style='text-align:center;width:30%'>" + data[i].code + "</td>"
            + "<td style='text-align:center;width:30%'>" + data[i].CreateTime + "</td>"
            + "</tr>";
    }
    _html += "</tbody></table>";

    $("#gridtablejw").html(_html);

　　html

<div class="cal_bottom" style="height:89%;overflow:hidden;margin-top:2%" id="gridtablejw">
            </div>

　　CSS

滚动条样式，将滚动条隐藏

.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
    width:0.5px;/*高宽分别对应横竖滚动条的尺寸*/
    height:4px;
    }
    
    .cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/  
    border-radius:5px;
    -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);  
    /* background:rgba(0,0,0,0.2);  */
    background: #051655;
    }
    
    .cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset005pxrgba(0,0,0,0.2); 
    border-radius:0;
    /* background:rgba(0,0,0,0.1); */
    background:#051655;
    }