区域自动滚动，循环滚动

html部分

 <div class="table_top" style="height: 0.4rem">
     <span>各分部span>
     <span>劳务队伍数量span>
     <span>在场人员span>
 div>
 <div class="table_bottom" style="height:200px" id="laowbox">
     <div class="table_bottom_itemBox" id="itemBox1">

     div>
     <div class="table_bottom_itemBox" id="itemBox2">div>
 div>
1
2
3
4
5
6
7
8
9
10
11

css部分

.table_top{
     display: flex;
     align-items: center;
     height: 0.4rem;
     background: url("../../../img/visual/aqgl/table_top.png") no-repeat;
     background-size: 100% 100%;
 }
 .table_top span{
     width: 33.33%;
     height: 0.2rem;
     text-align: center;
     color: #fff;
 }
 .table_top{
     display: flex;
      align-items: center;
      height: 0.4rem;
      background: url("../../../img/visual/aqgl/table_top.png") no-repeat;
      background-size: 100% 100%;
  }
  .table_top span{
      width: 33.33%;
      height: 0.2rem;
      text-align: center;
      color: #fff;
  }
  .table_bottom span{
       width: 33.33%;
       height: 0.2rem;
       text-align: center;
       color: #fff;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

js部分

$.ajax({
     type: 'POST',
     url: 'xxx', //接口地址
     success: function (res) {
         var dataList =  res.dataResult.data.dataList;
         var htmlStr = "";

         for (let i = 0; i <dataList.length ; i++) {
             htmlStr+="
\n" +
                 ""+dataList[i].groupName+"\n" +
                 ""+dataList[i].groupCount+"\n" +
                 ""+dataList[i].perCount+"\n" +
                 "
";
         }

         $(".table_bottom_itemBox").html(htmlStr);
         var tableBody = document.getElementsByClassName('table_bottom')[0]
         var itemBox1 = document.getElementById('itemBox1')
         //关键代码start
         function rollFn(){
             if(tableBody.scrollTop >= itemBox1.scrollHeight){
                 tableBody.scrollTop = 0
             }else{
                 tableBody.scrollTop++
             }
         }
         var timer = setInterval(rollFn,40)
         tableBody.addEventListener('mouseover',()=>{clearInterval(timer)})
         tableBody.addEventListener('mouseout',()=>{timer = setInterval(rollFn,40)})
         //关键代码end
     }
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32