【无标题】如何实现数据列表的滚动效果，快速处理

最新推荐文章于 2024-10-01 20:12:28 发布

远方的原

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量269

点赞数 1

分类专栏：项目问题总结文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_44890362/article/details/141602477

版权

项目问题总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如何实现某个数据列表滚动效果，快速处理。

  <div class="tableData" id="tableData">
          <div class="tables" id="tables">
            <div class="dataLine">
              <div class="appcation"></div>
              <div class="appcation"></div>
              <div class="appcation"></div>
            </div>
          </div>
          <div class="tables" id="tables2">
          </div>
  </div>

// 渲染列表函数
  function getData (data) {
    data.forEach((item, index) => {
      $('.panel1 .tables .dataLine').eq(index).children().eq(0).html(item.name1)
      $('.panel1 .tables .dataLine').eq(index).children().eq(1).html(item.name2)
      $('.panel1 .tables .dataLine').eq(index).children().eq(2).html(item.name3)
    });
    scrollTopFun();
  }
  // 滚动函数
  function scrollTopFun () {
      let tableData = document.getElementById("tableData");
      let tables = document.getElementById("tables");
      let tables2 = document.getElementById("tables2");
      let speed = 40;
      if (tables.offsetHeight >= tableData.offsetHeight) {
        tables2.innerHTML = tables.innerHTML;
        let timer = setInterval(scrollTop, speed);
        // 滚动函数
        function scrollTop() {
          if (tableData.scrollTop >= tables.scrollHeight) {
            // 滚完归0
            tableData.scrollTop = 0;
          } else {
            // 滚动起来
            tableData.scrollTop++;
          }
          // 暂停一下
          if (tableData.scrollTop % 100 == 0) {
            clearInterval(timer);
            setTimeout(() => {timer = setInterval(scrollTop, 30)}, 2000);
          }
        }
      }
  }