前端实现列表无缝自动滚动效果实例代码(div列表+table表格)

<template>
  <div class="scroll-list" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
    <div class="scroll-content" ref="scrollContent">
      <div
        v-for="item in typicalCaseList"
        :key="'a' + item.id"
        class="scroll-item"
      >
        <span>{{ item.text }}</span>
      </div>
      <!-- 复制一份 -->
      <div
        v-for="item in typicalCaseList"
        :key="'b' + item.id"
        class="scroll-item"
      >
        <span>{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typicalCaseList: [
        // ... 你的数据
      ]
    };
  },
  mounted() {
    const list = this.$refs.scrollContent;
    // 根据列表长度动态设置动画时长（可按需调整策略）
    const itemCount = this.typicalCaseList.length;
    const duration = Math.max(8, itemCount * 0.8); // 秒，示例：最少 8s
    list.style.setProperty('--duration', `${duration}s`);
  },
  methods: {
    pauseScroll() {
      this.$refs.scrollContent.style.animationPlayState = 'paused';
    },
    resumeScroll() {
      this.$refs.scrollContent.style.animationPlayState = 'running';
    }
  }
};
</script>

<style scoped>
.scroll-list {
  height: 228px;
  margin: 0px 8px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  display: flex;
  flex-direction: column;
  animation: scroll-up var(--duration) linear infinite;
}

.scroll-item {
  height: 43px;
  font-size: 16px;
  color: #D0DEEE;
  padding: 0 10px;
  transition: all 0.3s;
  border-bottom: 1px dashed rgba(69,174,253,0.43);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.scroll-item:hover {
  color: #03A7FA;
}

/* 真正无缝滚动动画 */
@keyframes scroll-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
</style>

const itemHeight = this.$refs.scrollContent.querySelector('.scroll-item').offsetHeight;
const H = itemHeight * this.typicalCaseList.length;
const speed = 30; // px/s
const duration = H / speed;
this.$refs.scrollContent.style.setProperty('--duration', `${duration}s`);

if (content.scrollHeight <= container.clientHeight) {
  // 不启用动画：移除 animation
  content.style.animation = 'none';
} else {
  content.style.animation = `scroll-up var(--duration) linear infinite`;
}

<div class="table-scroll-wrapper">
  <table class="table-box-right">
    <thead>
      <tr>
        <th>姓名</th>
        <th>城市</th>
        <th>年龄</th>
      </tr>
    </thead>
  </table>

  <div class="table-body-wrapper">
    <table class="table-box-right scroll-content">
      <!-- 可以通过判断来实现达到多少条数据时，触发滚动动画 -->
      <tbody :class="{ scrollable: tableData.length > 5 }">
        <!-- 克隆两次实现无缝滚动 -->
        <tr v-for="item in tableData" :key="item.f_id">
          <td>{{ item.name }}</td>
          <td>{{ item.city }}</td>
          <td>{{ item.age }}</td>
        </tr>
        <tr v-for="item in tableData" :key="'clone-' + item.f_id">
          <td>{{ item.name }}</td>
          <td>{{ item.city }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

.table-scroll-wrapper {
    width: 100%;
    color: #fff;
    padding: 20px;
}

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

.table-box-right th,
.table-box-right td {
    border: 1px solid #0058af;
    text-align: center;
    padding: 6px 8px;
    font-size: 14px;
}

/* 固定表头 */
.table-box-right thead th {
    background: #103e5f;
    position: sticky;
    top: 0;
    z-index: 2;
    color: #37eef4;
}
.table-box-right td {
    background: #01204c;
}

/* 滚动容器 */
.table-body-wrapper {
    max-height: 200px;
    overflow: hidden;
    position: relative;
}

.scroll-content tr {
    display: table; /* 保持表格样式 */
    width: 100%;
    table-layout: fixed;
}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } /* 移动一半，实现无缝滚动 */
}

.scroll-content tbody.scrollable {
    display: block; 
    animation: scrollUp 15s linear infinite; // 控制滚动速度 数值越大滚动越慢
}

.table-body-wrapper:hover .scroll-content tbody.scrollable {
    animation-play-state: paused;
}

/* 小于X条的 tbody 不加动画，默认不滚动 */
.scroll-content tbody:not(.scrollable) {
    display: table-row-group; /* 保持正常表格布局 */
    animation: none;
}