原生js实现表格循环滚动

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;}

 

 

 
ID
 
姓名
 
年龄
 
住址
 
 
 
 

 

 

 

 
1001
 
李四
 
AAAA
 
AAAA
 
 

 
1002
 
王五
 
AAAA
 
AAAA
 
 

 
1003
 
王五
 
AAAA
 
AAAA
 
 

 
1004
 
Jack
 
AAAA
 
AAAA
 
 

 
1005
 
小兰
 
AAAA
 
AAAA
 
 

 
1006
 
王五
 
AAAA
 
AAAA
 
 

 
1007
 
王五
 
AAAA
 
AAAA
 
 

 
1008
 
Jack
 
AAAA
 
AAAA
 
 

 
1009
 
小兰
 
AAAA
 
AAAA
 
 
 

var sTab = document.getElementsByClassName('tab-scroll')[0];//要滚动的表
 var tbody = sTab.getElementsByTagName('tbody')[0];//要滚动表格的内容
 sTab.appendChild(tbody.cloneNode(true));//追加一次滚动内容,以防滚动后可视区域无内容
 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);