原生js实现表格内容区滚动无线循环滚动，表头固定

 样式

 html

 <div class="boxall" style="height: 300px">
            <div class="alltitle">供应链</div>
            <div class="navboxall scrollable-table">
              <table id="my-table" class="table2" width="100%" border="0" cellspacing="0" cellpadding="0">
               <thead>
                  <tr>
                    <th scope="col">排名</th>
                    <th scope="col">单位</th>
                    <th scope="col">订单</th>
                  </tr>
                </thead>
                  <tbody>
                  <tr>
                    <td><span>1</span></td>
                    <td>xxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
                    <td>11490单<br></td>
                  </tr>
                  <tr>
                    <td><span>2</span></td>
                    <td>xxxxxxxxxxxxxxxxxxxxxxxx</td>
                    <td>9238单</td>
                  </tr>

                  <tr>
                    <td><span>3</span></td>
                    <td>xxxxxxxxxxxxxxxxxxxxxxxx</td>
                    <td>1240单</td>
                  </tr>
                  <tr>
                    <td><span>4</span></td>
                    <td>xxxxxxxxxxxxxxxxxxxxxx</td>
                    <td>5323单</td>
                  </tr>
                  <tr>
                    <td><span>5</span></td>
                    <td>xxxxxxxxxxxxxxxxxxx</td>
                    <td>13423单</td>
                  </tr>
                  <tr>
                    <td><span>6</span></td>
                    <td>xxxxxxxxxxxxxxxxxxx</td>
                    <td>45666单</td>
                  </tr>

                </tbody>
              </table>
            </div>
          </div>

 css

使用定位将内容区固定，滚动animation: scroll 10s linear infinite;鼠标移入时停止滚动animation-play-state: paused;高度不变，移开在滚动基础上滚动

.boxall {
	padding: 15px;
	background: rgba(0, 0, 0, .2);
	position: relative;
	margin-bottom: 15px;
	;
	z-index: 10;
}

.alltitle {
	font-size: 18px;
	color: #fff;
	position: relative;
	padding-left: 12px;
	margin-bottom: 10px;
}

.alltitle:before {
	width: 5px;
	height: 20px;
	top: 2px;
	position: absolute;
	content: "";
	background: #49bcf7;
	border-radius: 20px;
	left: 0;
}

.navboxall {
	height: calc(100% - 30px);
	overflow-y: hidden;
}
.table2 th {
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	font-size: 16px;
	color: rgba(255, 255, 255, .6);
	font-weight: normal;
	padding: 10px 0 10px 0;
}

.table2 td {
	font-size: 16px;
	color: rgba(255, 255, 255, .4);
	padding: 7px 0;
}

.table2 span {
	width: 24px;
	height: 24px;
	border-radius: 3px;
	display: block;
	background: #878787;
	color: #fff;
	line-height: 24px;
	text-align: center;
}

.table2 {
	width: 100%;
	border-collapse: collapse;
}

.table2 th {
	position: sticky;
	/* 固定表头 */
	top: 0;
	background: #0b1545;
	z-index: 1;
	line-height: 2;
}

.table2 tbody {
	position: absolute;
	top: 45px;
	animation: scroll 10s linear infinite;
}

@keyframes scroll {
	0% {
		top: 45px;
	}

	100% {
		top: -76.5%;/*该top可根据表格内容区高度自行调整，保证动画丝滑*/
	}
}

.table2 td:nth-child(1) {
	width: 157px;
}

.table2 td:nth-child(2) {
	width: 393px;
}
.table2 td:nth-child(3) {
    width: 160px;
}

  .table2 tbody:hover {
	animation-play-state: paused; /* 鼠标移过去就暂停滚动，松开继续滚动 */
  }
  .table2 tbody tr:hover {
	background-color: #021455;
  }

js

再复制一份tbody内容插入表格中，实现滚动闭环

 //供应链
    const table2 = document.querySelector('.table2');
    const tableCopy2 = table2.cloneNode(false);
    tableCopy2.classList.add('copy');

    // 复制所有 tbody
    const tbodyList2 = table2.querySelectorAll('tbody');
    tbodyList2.forEach(function (tbody) {
        const tbodyCopy2 = tbody.cloneNode(true);
        // 将克隆的 tbody 中的 tr、td 添加到原表格的 tbody 后面
        Array.from(tbodyCopy2.children).forEach(function (tr) {
            const newTr2 = tr.cloneNode(true);
            table2.querySelector('tbody').appendChild(newTr2);
        });
    });

    table2.parentNode.appendChild(tableCopy2);