頁面實現表格滾動

效果

JS代碼

initScrollBox: function () {
   var speed = [100, 100, 100, 100];
   var boxes = $('.boxscrolls');
   var me = this;
   boxes.each(function (i) {
      var box = $(this);
      var table = $(this).find("tbody").first();
      if (table.height() > box.height()) {
         $(this).find(".tablescroll0").html(table.html());
         var h1 = box.scrollTop(), h2 = table.innerHeight();

         function Marquee() {
            if (me.scrollFlag) {
               if (h1 >= h2) {
                  box.scrollTop(0);
                  h1 = box.scrollTop();
               } else {
                  box.scrollTop(++h1);
               }
            }
         }

         me.timer = setInterval(Marquee, speed[i]);
         //鼠標懸停 離開
         box.mouseover(function () {
            me.scrollFlag = false;
         });
         box.mouseout(function () {
            me.scrollFlag = true;
         });
      }
   });
},

頁面代碼

<table>
							<thead align="center" style="color: #0bace6">
							<th width="80">設備編號</th>
							<th width="80">設備位置</th>
							<th width="80">故障時間</th>
							<th >故障原因</th>
							</thead>
						</table>
							<div class="pre-scrollable boxscrolls" style="height: 170px">
								<table>
							<tbody style="color: red">
							<tr>
								<td width="80">12313</td>
								<td width="80">北京</td>
								<td width="80">20200301</td>
								<td >損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr><tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>

							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							<tr>
								<td>12313</td>
								<td>北京</td>
								<td>20200301</td>
								<td>損壞</td>
							</tr>
							</tbody>
								</table>
							</div>