无限滚动盒子

<template>
  <div class="container">
    <!-- Fixed Header Table -->
    <table class="fixed-header">
      <colgroup>
        <col style="width: 33%">
        <col style="width: 33%">
        <col style="width: 33%">
      </colgroup>
      <thead>
      <tr>
        <th v-for="(head, index) in header" :key="'head' + index">{{ head }}</th>
      </tr>
      </thead>
    </table>
    <!-- Scrollable Body Table -->
    <div ref="scrollContainer" class="scroll-body">
      <table>
        <colgroup>
          <col style="width: 33%">
          <col style="width: 33%">
          <col style="width: 33%">
        </colgroup>
        <tbody>
        <tr v-for="(list, index) in twiceDataList" :key="'data' + index">
          <td v-for="(item, itemIndex) in list" :key="'item' + itemIndex">{{ item }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts" name="GhScrollDivComp" setup>

const header = ["设备", "充电", "更新时间"];

const dataList = [
  ["设备编号1", "充电", "2021-09-01"],
  ["设备编号2", "充电", "2021-09-02"],
  ["设备编号3", "充电", "2021-09-03"],
  ["设备编号4", "充电", "2021-09-04"],
  ["设备编号5", "充电", "2021-09-05"],
  ["设备编号6", "充电", "2021-09-06"],
  ["设备编号7", "充电", "2021-09-07"],
  ["设备编号8", "充电", "2021-09-08"],
  ["设备编号9", "充电", "2021-09-09"],
  ["设备编号10", "充电", "2021-09-10"],
  ["设备编号11", "充电", "2021-09-11"],
  ["设备编号12", "充电", "2021-09-12"],
  ["设备编号13", "充电", "2021-09-13"],
  ["设备编号14", "充电", "2021-09-14"],
  ["设备编号15", "充电", "2021-09-15"],
  ["设备编号16", "充电", "2021-09-16"]
];
const twiceDataList = computed(() => [...dataList, ...dataList]);

const scrollContainer = ref(null);
let rafId;

const smoothScroll = () => {
  if (!scrollContainer.value) return;

  let lastTimestamp = performance.now();
  const halfway = scrollContainer.value.scrollHeight / 2;

  const step = () => {
    requestAnimationFrame((timestamp) => {
      const progress = timestamp - lastTimestamp;
      const scrollIncrement = progress * 0.05; // 调整0.05来增加/减少速度

      // 当滚动接近一半的复制列表时，平滑重置
      if (scrollContainer.value.scrollTop > halfway) {
        // 重置为0但增加了相同的滚动增量，使其看起来平滑过渡
        scrollContainer.value.scrollTop = 0 + scrollIncrement;
      } else {
        scrollContainer.value.scrollTop += scrollIncrement;
      }

      lastTimestamp = timestamp;
      rafId = requestAnimationFrame(step);
    });
  };

  rafId = requestAnimationFrame(step);
};

onMounted(() => {
  smoothScroll();
});

onUnmounted(() => {
  if (rafId) {
    cancelAnimationFrame(rafId);
  }
});

</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.fixed-header {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.scroll-body table {
  width: calc(100% - 2em); /* Adjust based on actual scrollbar width to align headers */
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed-header th {
  background-color: #0303fd;
  padding: 1% 2%;
  border: 1px solid #ddd;
  text-align: left;
  color: #FFFFFF;
}

.scroll-body {
  overflow: hidden;
  height: auto; // Adjust the height to control how many rows are visible at a time
  width: 100%;

  table {
    width: 100%;
    border-collapse: collapse;
  }

  td {
    padding: 1% 2%;
    color: #FFFFFF;
    border-left: #FFFFFF 1px solid;
    border-right: #FFFFFF 1px solid;
    text-align: left;
  }
}

.scrollable-body {
  transition: transform 1s ease; /* for a smooth scrolling effect */
}
</style>