JS实现表格无缝滚动（无限滚动效果）

头秃小天才

已于 2023-09-28 17:57:19 修改

阅读量3.6k

点赞数 1

文章标签： html 前端

于 2023-09-11 17:26:17 首次发布

本文链接：https://blog.csdn.net/qq_30907143/article/details/132803983

版权

效果图：

条件：(1)滚动区域内容高度>展示区域高度

(2)展示区域数据为俩份

原理：视觉上无缝滚动（实际上滚动条滚动完后回到顶部，重新开始从头滚动，俩份数据一致，所以视觉上无缝滚动，对比下图）

html、css部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    <meta name="renderer" content="webkit" />
    <!-- 引入jquery -->
    <script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  </head>

  <style>
    .cotable table tbody::-webkit-scrollbar {
      /* width: 0; 隐藏滚动条 */
    }

    .scroll-box {
      height: 200px;
      width: 100%;
      overflow-y: auto;
      position: relative;
    }
  </style>
  <body>
    <div>
      <table class="table">
        <thead>
          <tr>
            <th>序号</th>
            <th>品番</th>
            <th>库位</th>
            <th>数量</th>
            <th>部门</th>
            <th>状态</th>
            <th>时间</th>
          </tr>
        </thead>
      </table>

      <div class="scroll-box">
        <table class="scroll-tab">
          <tbody class="scrollContent"></tbody>
        </table>
      </div>
    </div>
  </body>
</html>

本demo数据为动态数据，故采用插入数据的方式

js部分

let str1 = '';
var scrollContent= document.getElementsByClassName('scroll-box').item(0);
var table = document.getElementsByClassName('scroll-tab').item(0);

//模拟数据
let data12 = {
          data: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }],
        };
  for (let n = 0; n < data12.data.length; n++) {
          str1 +=
            '<tr class="swiper-slide" style="height: 48px;"><td>' +
            data12.data[n].id +
            '</td><td>' +
            data12.data[n].pinfan +
            '</td><td>' +
            data12.data[n].kuwei +
            '</td><td>' +
            data12.data[n].shuliang +
            '</td>' +
            '<td>' +
            data12.data[n].bumen +
            '</td><td><i class="' +
            data12.data[n].zhuangtai +
            '"></i></td><td>' +
            data12.data[n].shijian +
            '</td></tr>';
        }

$('.scrollContent').append(str1);
$('.scrollContent').append(str1);//不能使用innerHtml  插入两次 目的是复制一份数据 使滚动区域高度大于容器高度 实现滚动效果

//滚动函数
function roll(t) {
     
          var timer = setInterval(rollStart, t); // 间隔时间t
          // 鼠标移入table时暂停滚动
          table.onmouseover = function () {
            clearInterval(timer);
          };
          // 鼠标移出table后继续滚动
          table.onmouseout = function () {
            timer = setInterval(rollStart, t);
          };
        }

// 开始滚动函数
 function rollStart() {
     
          // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
          if (scrollContent.scrollTop >= scrollContent.scrollHeight / 2) { 
           //注此处高度相当于为俩个tbody高度 需除2
            scrollContent.scrollTop = 0;
          } else {
            scrollContent.scrollTop++;
          }
        }
//执行函数
roll(50);