原生js實現(xiàn)表格循環(huán)滾動

更新時間：2020年11月24日 09:16:42 作者：卅夙愿

這篇文章主要為大家詳細介紹了原生js實現(xiàn)表格循環(huán)滾動，每次滾動一行停頓，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)表格循環(huán)滾動的具體代碼，供大家參考，具體內容如下

css

table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
th,td{line-height: 35px;border: 1px solid gray;text-align: center;width: 120px;}
.scroll-box{height: 280px;width: 500px;overflow: hidden;position: relative;}
.tab-scroll{position: absolute;left: 0;top: 0;border-top: none;}
.tab-scroll td{border-top: none;}

html布局

<table class="top">
 <thead>
 <tr>
 <th>ID</th>
 <th>姓名</th>
 <th>年齡</th>
 <th>住址</th>
 </tr>
 </thead>
 </table>
 <div class="scroll-box">
 <table class="tab-scroll">
 <tbody>
 <tr>
 <td>1001</td>
 <td>李四</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1002</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1003</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1004</td>
 <td>Jack</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1005</td>
 <td>小蘭</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1006</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1007</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1008</td>
 <td>Jack</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1009</td>
 <td>小蘭</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 </tbody>
 </table>
</div>

js代碼

var sTab = document.getElementsByClassName('tab-scroll')[0];//要滾動的表
 var tbody = sTab.getElementsByTagName('tbody')[0];//要滾動表格的內容
 sTab.appendChild(tbody.cloneNode(true));//追加一次滾動內容,以防滾動后可視區(qū)域無內容
 var speed = sTab.getElementsByTagName('td')[0].offsetHeight+3;//每次滾動的距離
 var tbdh = tbody.offsetHeight+1;//整個表的高度,是因為上邊的邊不算滾動
 
 function scrollTop() {
 var t = sTab.offsetTop;//獲取要滾動表的位置
 if (-tbdh == t) {//比較 滾動的距離等于整個表的高度 即第一個表完全看不見
 sTab.style.transition = '0s';//過渡動畫設為0秒
 sTab.style.top = 0;//位置設為初始位置
 scrollTop();//因為偷梁換柱消耗了一次過程,所以把這一次過程補回來
 }else{
 sTab.style.transition = '1s';
 sTab.style.top = t - speed + 'px';
 }
 }
setInterval(scrollTop, 1000);

解析思路圖