table:剩下的数据进行循环滚动,

有没有一种插件或者table的方法形成一个这样的操作
我有一个这样的table表格

img

让表头不动,剩下的数据进行循环滚动,

然后所有数据在黄色方框内展示,
红色方框的数据是排队数据,然后进行循环滚动,
滚到最上面然后回到最下面,在进行重复滚动

img

原生的话可以自己写一个方法:列表的无限滚动。
用的组件的话建议看看有无相关配置项(目前我只知道TDesign有提供虚拟滚动的表格配置)。
vue项目不介意引入其他组件库可以使用DataV的轮播表(只限于不进行表操作的表格数据)。
其他插件的话了解不多,等有缘人给你解答吧。

思路供参考,可用的话细节自己调吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table-scroll {
            width: 300px;
            overflow-y: hidden;
        }
        .table-scroll table {
            border: 1px solid #eee;
        }
        .table-scroll table td,
        .table-scroll table th {
            border-right: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }
        .table-tb {
            height: 120px;
            overflow: auto;
            display: inline-block;
        }
        table td {
            height: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="table-scroll">
        <table class="table-th">
            <!-- 设置列宽,两个表格要同步 -->
            <colgroup>
                <col name="A" width="150">
                <col name="B" width="120">
            </colgroup>
            <thead>
                <th>数据A</th>
                <th>数据B</th>
            </thead>
        </table>
        <table class="table-tb" id="s-tb">
            <!-- 设置列宽,两个表格要同步 -->
            <colgroup>
                <col name="A" width="150">
                <col name="B" width="120">
            </colgroup>
            <tbody>
                <tr><td>数据a1</td><td>数据a2</td></tr>
                <tr><td>数据b1</td><td>数据b2</td></tr>
                <tr><td>数据c1</td><td>数据c2</td></tr>
                <tr><td>数据d1</td><td>数据d2</td></tr>
                <tr><td>数据e1</td><td>数据e2</td></tr>
                <tr><td>数据f1</td><td>数据f2</td></tr>
                <tr><td>数据h1</td><td>数据h2</td></tr>
                <tr><td>数据i1</td><td>数据i2</td></tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    var tbDom = document.getElementById('s-tb')
    // 获取可滚动距离
    var canScrollDis = tbDom.scrollHeight - tbDom.offsetHeight
    if (canScrollDis) {
        Scroll_Top(tbDom)
    }
    function Scroll_Top (el) {
        // 最小每次移动0.5
        let rate = 0.5
        // 创建时间函数,执行滚动事件
        let scrollMove = setInterval(() => {
            // 滚动到底部的时候,重置滚动
            if (canScrollDis - el.scrollTop < 0) {
                el.scrollTop = 0
            } else {
                // 按照每次滚动距离设置元素,添加滚动值,使列表滚动
                el.scrollTop += rate
            }
        // 肉眼觉得流畅,最佳设置16ms
        }, 16)
    }
</script>
</html>

vue-seamless-scroll这个插件可以无限滚动
https://blog.csdn.net/weixin_51563985/article/details/118092297?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-118092297-blog-118998671.pc_relevant_multi_platform_whitelistv3&spm=1001.2101.3001.4242.1&utm_relevant_index=3