快捷導(dǎo)航

原生js實(shí)現(xiàn)表格循環(huán)滾動(dòng)

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

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

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

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];//要滾動(dòng)的表
 var tbody = sTab.getElementsByTagName('tbody')[0];//要滾動(dòng)表格的內(nèi)容
 sTab.appendChild(tbody.cloneNode(true));//追加一次滾動(dòng)內(nèi)容,以防滾動(dòng)后可視區(qū)域無(wú)內(nèi)容
 var speed = sTab.getElementsByTagName('td')[0].offsetHeight+3;//每次滾動(dòng)的距離
 var tbdh = tbody.offsetHeight+1;//整個(gè)表的高度,是因?yàn)樯线叺倪叢凰銤L動(dòng)
 
 function scrollTop() {
 var t = sTab.offsetTop;//獲取要滾動(dòng)表的位置
 if (-tbdh == t) {//比較 滾動(dòng)的距離等于整個(gè)表的高度 即第一個(gè)表完全看不見(jiàn)
 sTab.style.transition = '0s';//過(guò)渡動(dòng)畫(huà)設(shè)為0秒
 sTab.style.top = 0;//位置設(shè)為初始位置
 scrollTop();//因?yàn)橥盗簱Q柱消耗了一次過(guò)程,所以把這一次過(guò)程補(bǔ)回來(lái)
 }else{
 sTab.style.transition = '1s';
 sTab.style.top = t - speed + 'px';
 }
 }
setInterval(scrollTop, 1000);

解析思路圖