前端实现列表无缝自动滚动效果（div 列表+table 表格）

一、div 列表滚动

需要实现内容无限、平滑、无闪动地向上滚动；当鼠标悬停到列表时，滚动暂停并高亮当前项；鼠标移出后继续滚动。这是在大屏项目中常见的一种数据展示方式。

实现原理： 使用 CSS @keyframes 将原始列表渲染两次（A + A），整个双倍内容从 translateY(0) 平滑移动到 translateY(-50%)（即移动一份内容的高度），动画无限循环。因为下半部分是上半部分的复制，循环在视觉上是连续的、无断点的——没有 JS 在中间做'重置'，因此无闪动。

HTML：

<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>