html
????????????<div?class="自定義樣式">
??????????????<table>
????????????????<thead>
????????????????<tr?class="table-title">
??????????????????<th>x1</th>
??????????????????<th>x2</th>
??????????????????<th>x3</th>
??????????????????<th>x4</th>
??????????????????<th>x5</th>
????????????????</tr>
????????????????</thead>
??????????????</table>
??????????????<div?class="scroll-box">
????????????????<table?#table?class="tab-scroll">
??????????????????<tbody>
??????????????????<tr?*ngFor="let?item?of?dataSet">
????????????????????<td>{{item.x1}}</td>
????????????????????<td>{{item.x2}}</td>
????????????????????<td>{{item.x3}}</td>
????????????????????<td>{{item.x4}}</td>
????????????????????<td>{{item.x5}}</td>
??????????????????</tr>
??????????????????</tbody>
????????????????</table>
??????????????</div>
??????????</div>
ts
//引入組件
@ViewChild('table')?table:?ElementRef;
//?表格屬性初始化
??sTab;
??tbody;
??speed:?number;
??tbdh:?number;
??intervalID;
??timeoutID;
?//?表格數(shù)據(jù)
dataSet:?Array<any>?=?[
????{?"x1":"1",
??????"x2":"1",
??????"x3":"1",
??????"x4":"1",
??????"x5":"1"
????},
????{?"x1":"1",
??????"x2":"1",
??????"x3":"1",
??????"x4":"1",
??????"x5":"1"
????},
????{?"x1":"1",
??????"x2":"1",
??????"x3":"1",
??????"x4":"1",
??????"x5":"1"
????},
????{?"x1":"1",
??????"x2":"1",
??????"x3":"1",
??????"x4":"1",
??????"x5":"1"
????},
????{?"x1":"1",
??????"x2":"1",
??????"x3":"1",
??????"x4":"1",
??????"x5":"1"
????},
????{?"x1":"1",
??????"x2":"1",
??????"x3":"1",
??????"x4":"1",
??????"x5":"1"
????},
????{?"x1":"1",
??????"x2":"1",
??????"x3":"1",
??????"x4":"1",
??????"x5":"1"
????}
??];
setScroll()?{
????this.sTab?=?this.table.nativeElement;?//?要滾動的表
????this.tbody?=?this.sTab.getElementsByTagName('tbody')[0];?//?要滾動表格的內(nèi)容
????if?(this.dataSet.length?>?6)?{
??????//設(shè)置5s后開始滾動（只執(zhí)行一次）-- setTimeout() 此定時器只執(zhí)行一次
??????this.timeoutID?=?setTimeout(()?=>?{
????????//?每次滾動的距離
????????this.speed?=?this.sTab.getElementsByTagName('td')[0]?&&?this.sTab.getElementsByTagName('td')[0].offsetHeight;?
????????this.tbdh?=?this.tbody.offsetHeight;????//?整個表的高度,是因為上邊的邊不算滾動
????????//設(shè)置滾動時間：1.2s滾動一次（持續(xù)執(zhí)行）--? setInterval() 此定時器 無限循環(huán)執(zhí)行回調(diào)函數(shù)； 除非調(diào)用clearInterval()方法
????????this.intervalID?=?setInterval(()?=>?this.scrollTop(),?1200);
??????},?5000);
????}
??}
/*輪動位置處理*/
??scrollTop()?{
????const?t?=?this.sTab.offsetTop;?//?獲取要滾動表的位置
????if?((this.tbdh?/?2?+?t)?<?(this.speed?/?2))?{//?比較??滾動的距離等于整個表的高度???即第一個表完全看不見
??????this.sTab.style.transition?=?'0s';?//?過渡動畫設(shè)為0秒
??????this.sTab.style.top?=?0;?//?位置設(shè)為初始位置
??????this.scrollTop();?//?因為偷梁換柱消耗了一次過程,所以把這一次過程補回來
????}?else?{
??????this.sTab.style.transition?=?'1s';
??????this.sTab.style.top?=?t?-?this.speed?+?'px';
????}
??}
效果如下（是動態(tài)滾動的）：
