JavaScript简单实现表格滚动

前言

年前安排了个人才云大数据前端项目，其中大部分用到了Echarts实现图标展示，有两个人才表滚动。当初以为是单纯表格，然后以为是scroll类型的鼠标滚轮的表格滚动。再次确认才知道需要自动滚动

技术要点

js定时器
基本操作

预览图

实现代码

CSS样式摘要

.container .box-body {
    position: relative;
    height: 70%;
    color: #fff;
    padding: 3%;
    overflow: hidden;
}
.main-bottom table thead {
    background: rgba(94, 138, 226, 0.1);
}

/* 排名 */
.main-bottom table .first {
    background: linear-gradient(90deg, #6648F5, transparent, transparent)
}

.main-bottom table .second {
    background: linear-gradient(90deg, #4346D3, transparent, transparent)
}

.main-bottom table .third {
    background: linear-gradient(90deg, #3134A3, transparent, transparent)
}

/* 表格hover */
.main-bottom .box .table-body table tr:hover {
    background: rgba(94, 138, 226, 0.1);
}

/* .main-bottom .box:nth-child(1) .table-body table tr:hover {
    background: rgba(94, 138, 226, 0.1);
}
.main-bottom .box:nth-child(2) .table-body table tr:nth-child(n+4):hover {
    background: rgba(94, 138, 226, 0.1);
} */
/* 固定表头和滚动表格 */
.table-head table,
.table-body table {
    width: 100%;
}

/* 固定宽度 15 20 25 20 20 */
.table-head table th:nth-child(-n + 5),
.table-body table td:nth-child(-n + 5) {
    width: 20%;
}

.table-head table th:nth-child(1),
.table-body table td:nth-child(1) {
    width: 15%;
}

.table-head table th:nth-child(3),
.table-body table td:nth-child(3) {
    width: 25%;
}

.table-body tbody {
    position: relative;
    top: 0px;
}

.main-bottom .table-body {
    width: 100%;
    height: 82%;
    overflow: hidden;/*  scroll; */
    overflow-x: hidden;
}

.main-bottom .table-body::-webkit-scrollbar {
    display: none;
}

Html格式摘要

<div class="box-body">
    <!-- 固定表头 -->
    <div class="table-head">
        <table class="table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>岗位</th>
                    <th>评定人才值</th>
                    <th>评定等级</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- 滚动内容 -->
    <div class="table-body">
        <table class="table">
            <tbody>
                <!-- 追加内容 -->
            </tbody>
        </table>
    </div>
</div>

Js代码摘要

//2.表格滚动
$(function() {
    let tblArr = $('.table-body .table');
    let tblTop = 0;
    let rollspeed = 60;
    // html内容处理
    tblArr.each((index, item) => {
        $(item).html($(item).html() + $(item).html())
    })
    // todo 等待处理
    function tblMarquee() {
        // 行高
        let outerHeight = tblArr.find('tbody').find("tr").outerHeight()
        // 循环处理
        tblArr.each((index, item) => {
            // 总数
            let count = $(item).find('tbody').eq(0).find("tr").length;
            // 恢复滚动位置
            if(tblTop <= -outerHeight * count){
                tblTop = 0;
            } else {
                tblTop -= 1;
            }
            // 滚动
            $(item).find('tbody').css('top', tblTop +'px')
        })
    }
    setInterval(tblMarquee,  rollspeed)

})

整屏预览