最近又接了个可视化大屏的活儿需求里果然又出现了那句熟悉的“表格数据要滚动起来”。做大屏项目多了你会发现这个需求几乎绕不开实时订单、告警记录、设备状态、人员名单总有一张表要在大屏上不停地“流动”。网上搜实现方案确实不少但很多代码照搬进项目里就出问题——滚动卡顿、边界跳变、后台切回来动画错乱、大屏上字发虚踩坑踩得多了我把这几年在可视化大屏项目里用过的表格数据滚动方案整理了一遍从最简单到最复杂把每种方案的原理、适用场景和坑都写清楚。这篇文章适合正在做可视化大屏、数据监控看板或者想给自己的后台加一个滚动表格但不想踩坑的开发者。无论你是用原生 JavaScript、Vue 还是 React思路都是通用的代码例子我尽量给成可以直接抄走用的形态。1. 先把需求想清楚大屏表格滚动到底要解决什么问题1.1 四种典型需求对应不同技术路线我拆过不少大屏需求表面上看都是“表格滚动”但细问下来通常是四种完全不同的诉求第一种是“纯展示滚动”数据源固定或低频更新比如昨日销售排行榜、工单完成率排名表格内容从头滚到尾再循环。这种需求最轻松一个 CSS transform 动画甚至一行 setInterval 就能搞定。第二种是“实时数据追加滚动”比如告警列表、消息推送记录每隔几秒或十几秒就有一批新数据进来表格要平滑地往上滚同时把新数据加进来。这种就要求方案本身具备“随时改数据源、随时重置高度”的能力不能用写死的 CSS 动画。第三种是“数据量较大的滚动”比如要展示几万行日志或者监控系统吐出来的全量指标数据。这个时候 DOM 数量一多任何“把所有行渲染出来再滚动”的方案都会让大屏主机卡成幻灯片必须上虚拟列表。第四种是“跳跃式轮播”不是平滑滚动而是每 3 秒停一下滚一行像旧式广告灯箱那样。有些客户就喜欢这种观感说“有节奏感”这时候你还得换一种实现策略。我的建议是接到需求先别急着写代码问清楚一句话——“这些数据多久更新一次、大概有多少条”。这两个问题直接决定下面五套方案里你该选哪套。1.2 大屏环境与普通后台页面的关键差异给大屏写滚动表格和给后台管理页面写滚动表格很多看似“很正常”的做法在大屏上会翻车。第一个差异是运行时长。大屏项目上线之后往往 7×24 小时不关机、不刷新页面。普通控制台页面上的 setInterval切到后台标签页会被浏览器降频用户回到页面之后继续跑你很难察觉到异常但大屏上如果定时器累积误差、requestAnimationFrame 在长时间挂起后产生巨大时间差就会让滚动速度突然变得离谱或者干脆停住。第二个差异是分辨率。大屏通常不是普通显示器常见的是 1920×1080 拼接屏、3840×2160 的 4K 屏甚至是异形 LED 屏。页面要做等比缩放适配缩放之后表格文字会不会发虚、滚动速度和视觉比例是否协调这些都要提前考虑。第三个差异是硬件性能。大屏后端主机的配置差异巨大有的客户用的是 i5 核显的迷你机有的用好几年前的工控机跑一套 3D 地区地图可视化大屏已经快满负荷了。如果你的表格滚动方案动不动触发整块区域的重绘和回流把 CPU 拉满那些 3D 地图场景会一起掉帧客户开完会就要找你。所以做大屏表格滚动不能只“实现功能”要当成一个需要长期稳定运行的独立小模块来做。1.3 选型前的思考路径我一般按这个路径选型数据量小于 100 条、行高固定、数据几乎不变首选 CSS transform 无缝循环代码量最少性能最好。数据量小于 500 条、行高固定、会动态追加数据、需要平滑滚动requestAnimationFrame transform也是我项目里最常用的一套。数据量小于 500 条、需要“滚一行停一下”的效果定时器 CSS transition。数据量几千到上万虚拟列表或者让后端只返回 TOP 50 条。团队工期紧、数据形态简单可以考虑无缝滚动插件但要做好改样式的心理准备。下面从简单到复杂把这五套方案逐一拆开讲。2. 五种实现方案详解从简单到复杂逐个拆2.1 CSS transform 无缝循环滚动代码量最少如果数据固定不变就用最经典的“双份内容 transform 位移”方案。原理不复杂把表格内容复制成完全相同的两份首尾相接放到同一个容器里然后让容器整体向上位移位移到“正好走完一份内容高度”时瞬间重置回 0。因为两份内容长得一模一样用户肉眼根本看不出重置动作就像无限滚动一样。核心代码只有两段。先看 HTML 结构div classscroll-wrapper div classscroll-content idscrollContent !-- 这里放两份相同的表格内容 -- /div /div外层设置固定高度和 overflow: hidden内层放两份列表然后写动画.scroll-wrapper { height: 400px; overflow: hidden; } .scroll-content { will-change: transform; animation: scrollUp 20s linear infinite; } keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }JavaScript 部分只需要把列表数据渲染两份出来。为什么位移 50% 而不是某个固定像素值因为内层总高度是列表高度 × 2translateY(-50%) 正好是“一份内容的高度”这样即使内容高度变化动画也能保持“滚完一份再从头开始”的语义不需要手动改数值。这套方案的优点非常突出不跑 JS 逻辑浏览器把动画丢给合成器处理CPU 占用极低代码量也极少。缺点也很明显动画的位移距离和速度比例是写死在 CSS 里的如果数据是动态追加的、行高不固定、或者需要“滚动到某一帧停下来”它都很难优雅处理。另外提醒一句不要给两份内容之间加 margin 或 gap否则 50% 这个比例不再等于一份内容的高度循环时会出现明显的跳跃。2.2 requestAnimationFrame 逐行精准滚动项目里最常用如果你要在滚动过程中追加数据、控制速度、悬停暂停CSS 动画就不够了我用得最多的方案是 requestAnimationFrame transform。核心思路是用 requestAnimationFrame 驱动一个循环每帧根据时间差算出应该位移多少像素更新容器的 transform。因为每帧都在 JS 里算位置所以可以随时改速度、随时暂停、随时追加数据并重新计算高度。写一个最小实现type ScrollOptions { speed: number; // 滚动速度像素/秒 container: HTMLElement; // 滚动的外层容器 }; function startScroll({ speed, container }: ScrollOptions) { const content container.querySelector(.scroll-content) as HTMLElement; // 两份内容保证无缝循环 let offset 0; let lastTime 0; let rafId 0; const step (time: number) { if (!lastTime) lastTime time; // 限制单帧最大时间差防止后台切回来时瞬间滚很远 const delta Math.min((time - lastTime) / 1000, 0.1); lastTime time; // 滚动高度取一份内容的高度而不是整个容器 const singleHeight content.scrollHeight / 2; offset speed * delta; if (offset singleHeight) { offset 0; } content.style.transform translate3d(0, ${-offset}px, 0); rafId requestAnimationFrame(step); }; rafId requestAnimationFrame(step); return () cancelAnimationFrame(rafId); }这里有几个关键点必须说清楚。第一一定要用time时间戳算增量而不是每帧加固定值。不同大屏主机的刷新率不一样有的是 60Hz有的是 30Hz如果每帧固定加 0.5 像素高刷屏上就会滚得比低刷屏快一倍观感完全失控。用(time - lastTime) / 1000算出真实秒数再乘以速度就可以做到“无论多少帧率每秒位移量都一样”。第二Math.min(..., 0.1)一定要加。大屏项目经常要开会演示电脑合上盖子再打开或者切换信号源requestAnimationFrame 会被浏览器挂起一段时间恢复时time直接跳了一大截不做限制的话表格会在 1 秒内猛滚半屏非常吓人。第三如果要追加数据不要在 scrollHeight 发生变化的过程中直接读它的值。我的习惯是维护一个dataLength变量数据更新时手动计算新的单份高度而不是每次循环都去读 scrollHeight。这样能减少强制同步布局的频率对性能更友好。这套方案虽然比 CSS 方案复杂一点但可控性最强我几乎所有大屏项目的表格滚动都是用它做的。后面第 4 节我会给一个完整的 Vue3 组件。2.3 定时器 transition 的跳跃式滚动适合慢节奏展示有些大屏客户的审美偏好是“一格一格跳”所以我单独说下定时器方案。简单实现是定时改变 transform同时给容器加上 transition 过渡let index 0; const rowHeight 36; // 单行高度 const visibleCount 8; // 可视行数 const dataTotal data.length; const list document.getElementById(scrollList); setInterval(() { index (index 1) % (dataTotal - visibleCount 1); list.style.transition transform 0.6s ease; list.style.transform translateY(${-index * rowHeight}px); }, 3000);这段逻辑本身不难理解但有几个容易翻车的实际坑。一是“跳回第一行”时的动画。当 index 到达最后一行后如果直接重置 index 0transform 会从很高的负位移瞬间回到 0transition 会捕捉到这个变化产生一个“快速回滚一大段”的动画。正确地做法是先取消 transition再用 requestAnimationFrame 强制重置到 0下一帧再把 transition 加回来这样用户看到的是“从末尾处停顿一下下一行又从顶部出现”。二是 setInterval 的累积误差问题。JavaScript 定时器并不精确如果大屏主机负载高回调可能延迟执行长跑之后节奏会越来越乱。我自己的经验是对这个场景不要过度依赖 setInterval 的计时间隔可以改为每 3 秒去读取一下“当前时间与上次执行时间的差”如果差超过 1.5 倍就跳过本轮让节奏尽量回到正轨。三是按钮或事件绑定。因为列表容器一直在位移如果表格行里有按钮需要点击或者要实现鼠标悬停暂停定时器方案会比较难受因为“当前显示的到底是第几行”这个状态需要额外换算。2.4 无缝滚动插件赶工时可以考虑如果项目周期紧你也用的是 Vue 这类框架可以试试现成的无缝滚动插件。这类插件里 vue-seamless-scroll 用得比较多它的配置项很直白const config { step: 0.5, // 滚动速度数值越大越快 limitMoveNum: 5, // 数据条数超过多少时启用滚动 hoverStop: true, // 鼠标悬停是否暂停 direction: 1, // 1 向上0 向下 openTouch: true, // 移动端触摸开关 singleHeight: 0, // 单条数据高度0 表示自动计算 singleWidth: 0, waitTime: 1000 // 单次动画时长 };插件省事但我用过几次之后基本放弃了原因有三个。第一插件内部为了兼容各种数据格式做了很多 DOM 操作数据量大时反而比手写 requestAnimationFrame 方案更卡。第二样式锁定比较死大屏项目里的表格通常要配合亮色/暗色主题、自定义字体、渐变背景插件默认生成的那套结构改起来费劲。第三免费的这类开源组件质量参差不齐遇到 bug 你要自己去读源码修反而比手写组件花的时间多。所以我现在的结论是如果是内部项目、数据简单、没有强定制需求插件可以做如果是给客户交付的可视化大屏项目或者大屏里带了 3D 地区地图这种重型可视化组件我建议还是用原生方案依赖少一点出问题好排查。2.5 虚拟列表滚动数据量上万时用这个最后说虚拟列表。大屏表格真的需要展示上万条数据吗大部分场景是不需要的客户更关心的是“最近 50 条告警”而不是把几万条全量数据铺在屏幕上。但确实会遇到这样的需求比如要把全量监控指标流水放进大屏这时候所有的“渲染全部 DOM 再滚动”方案都会卡死虚拟列表是唯一解法。虚拟列表的核心思想是视口高度固定数据总量不管多大只渲染可视区域附近的那十几行。实现要点如下外层固定高度设置 overflow: hidden。内层用一个占位容器高度 数据总条数 × 行高保证滚动条/位移范围正确。监听滚动到的偏移量计算出当前应该显示从第几行到第几行。把计算出的那段数据渲染出来整体用 transform 定位到对应偏移位置。核心计算逻辑大概是const ROW_HEIGHT 36; const VISIBLE_COUNT 10; const BUFFER 2; // 上下各多渲染几行避免快速滑动时出现空白 function getRenderRange(scrollTop: number, total: number) { const start Math.max(Math.floor(scrollTop / ROW_HEIGHT) - BUFFER, 0); const end Math.min(start VISIBLE_COUNT BUFFER * 2, total); return { start, end }; }对大屏项目来说虚拟列表还有一个附加好处即使是在核显主机上也不用担心表格滚动导致整体 GPU 负载过高因为 DOM 数量始终很少。但虚拟列表的坑也不少。比如行高必须固定如果某一行内容折行变成两行整个计算就乱了比如大屏缩放后行高变成 40px但代码里还按 36px 算会出现渲染行错位。所以我的建议是能用后端限制数据量就不用虚拟列表实在要上虚拟列表确保行高固定并且把行高做成可配置参数适配大屏时好调。3. 大屏适配与性能调优让滚动不卡不漏细节3.1 不同适配方案下滚动速度的差异与处理大屏分辨率五花八门所以页面通常要做适配。常见的适配方案有三种整体 scale 等比缩放、vw/vh 自适应、rem 自适应。它们对滚动速度的影响不太一样。如果你用整体 scale 方案比如固定设计稿 1920×1080然后计算实际窗口和设计稿的比例整体缩放那么页面内部其实运行在一套虚拟像素里表格的滚动速度和视觉比例是同步缩放的。假设设计稿上表格每秒滚动 30px实际大屏是 3840×2160scale 是 2物理屏幕上每秒滚动 60px但相对于整个屏幕的占比并没有变所以观感是协调的不需要额外调整滚动速度。如果你用 vw/vh 布局表格容器的宽度高度都跟随屏幕变化但表格行高通常还是用 px 或者按宽度比例计算可能导致行高和容器高度不匹配。比如行高 36px在 4K 大屏上看起来非常小如果强行把行高调成 72px滚动速度还按 30px/s 来设视觉上就会觉得滚得很慢。这种情况我的经验是把滚动速度也做成和行高相关的配置行高翻倍时速度也翻倍保持“每秒滚动约 0.8 行”的视觉节奏。最麻烦的是不等比拉伸方案就是把宽度拉满、高度拉满不管原始比例。这种适配下表格会被拉变形文字发虚滚动距离和视觉比例全对不上。我遇到这种项目一般会明确告诉客户大屏要等比缩放宁可留黑边也别拉伸变形。否则表格滚动的所有计算都会变得不可控。3.2 性能优化合成层、回流、重绘的取舍大屏表格滚动想流畅关键不是把代码写得多花哨而是减少不必要的浏览器重绘和回流。我的经验里最重要的三条第一用 transform 而不是 top/left 或者 margin-top 来做位移。transform 的变化在绝大多数浏览器里可以走 GPU 合成不会触发布局计算而 top/left 每帧变化都会触发重排CPU 一高帧率就往下掉。这也是为什么我在前两套方案里都用 translate3d(0, y, 0)而不是直接改 top。第二列表项里的样式要克制。box-shadow、backdrop-filter、大量渐变背景都是重绘大户。大屏表格本身信息密度就高你要是每行再加个阴影滚动的时候整个屏幕都在疯狂重绘。我自己项目里滚动列表的行样式通常只用背景色、边框、文字颜色最多加一层很轻的底部分隔线。第三数据更新时避免一次性重建整个列表。如果新数据只是追加了十几条尽量复用已有的 DOM 行只更新新增行。用 Vue 的话给每行设置稳定的 key避免组件误判而全部重建。另外有一种情况特别值得注意如果你用了整体 scale 缩放方案缩放本身就会让浏览器对整块页面做合成处理这时候表格内部的 will-change 属性反而不要滥用。过度创建合成层会占用大量 GPU 内存在大屏主机的核显上可能得不偿失。我一般只给最外层滚动容器加 will-change: transform列表项内部一律不加。3.3 7x24 小时运行的稳定性处理大屏是要连续跑好几个月的滚动方案必须考虑“长时间运行”这个前提。我觉得有几件事是必须做的监听visibilitychange事件页面从隐藏切回可见时重置时间戳防止时间差爆炸。组件卸载时一定把 requestAnimationFrame 和所有事件监听都清掉。大屏项目经常要二次进入定时器清理不干净第二次进入就会出现“两个滚动同时驱动同一个容器”速度翻倍或者乱跳。数据更新频率高时可以考虑把“更新 DOM”和“滚动动画”拆成两个循环。DOM 更新用queueMicrotask或requestAnimationFrame批量处理避免在滚动过程中频繁触发布局。有条件的话做个“滚动状态自检”每隔几分钟检查一下容器的 transform 值是否还在变化如果长时间没变说明动画可能停了自动重启。大屏无人值守场景下这招救过我两次。4. 实操手写一个通用表格滚动组件Vue3 TypeScript4.1 组件需求与对外参数说了这么多理论直接上一个能用的组件。我用 Vue3 TypeScript 写一个TableScrollList.vue它要满足这些需求传入数组数据渲染成表格表格整体向上平滑滚动。滚动速度可配置单位是“像素/秒”。鼠标悬停时暂停移出后继续。数据变化时自动重建内容重置滚动位置不影响后续滚动。页面标签页切走再回来不出现速度突变。对外参数这样设计type Props { data: Recordstring, any[]; // 表格数据 rowHeight: number; // 单行高度 speed?: number; // 滚动速度 px/s默认 30 hoverStop?: boolean; // 悬停暂停默认 true };4.2 核心实现代码与关键点说明组件模板部分template div classtable-scroll :style{ height: containerHeight px } mouseenterhoverStop pause() mouseleavehoverStop resume() div classtable-scroll__body :style{ height: singleHeight * 2 px } div classtable-scroll__list reflistRef template v-for(item, index) in doubleData :keyindex div classtable-scroll__row :style{ height: rowHeight px } slot :itemitem :indexindex / /div /template /div /div /div /template比较关键的是doubleData的构造把外部传入的 data 复制一份拼接起来保证无缝循环。容器高度写成singleHeight * 2而滚动时只滚singleHeight的距离滚完就复位。Script 部分script setup langts import { ref, computed, onMounted, onBeforeUnmount, nextTick } from vue; const props withDefaults(definePropsProps(), { speed: 30, hoverStop: true, }); const listRef refHTMLElement | null(null); const offset ref(0); const singleHeight computed(() props.data.length * props.rowHeight); const containerHeight computed(() props.rowHeight * Math.min(props.data.length, 8)); const doubleData computed(() [...props.data, ...props.data]); let rafId 0; let lastTime 0; let isPaused false; let isHidden false; function step(time: number) { if (isPaused || isHidden) { lastTime 0; rafId requestAnimationFrame(step); return; } if (!lastTime) lastTime time; const delta Math.min((time - lastTime) / 1000, 0.1); lastTime time; offset.value props.speed * delta; if (offset.value singleHeight.value) { offset.value 0; } if (listRef.value) { listRef.value.style.transform translate3d(0, ${-offset.value}px, 0); } rafId requestAnimationFrame(step); } function pause() { isPaused true; lastTime 0; } function resume() { isPaused false; lastTime 0; } function onVisibilityChange() { isHidden document.hidden; lastTime 0; } onMounted(async () { await nextTick(); lastTime 0; rafId requestAnimationFrame(step); document.addEventListener(visibilitychange, onVisibilityChange); }); onBeforeUnmount(() { cancelAnimationFrame(rafId); document.removeEventListener(visibilitychange, onVisibilityChange); }); /script这段代码里我觉得需要额外解释几个点。containerHeight我限制为最多 8 行的高度。大屏上的表格区域是有限的如果数据有 100 行不能把外层容器撑到 3600px而是固定给 8 行左右的视口高度剩下的靠滚动展示。这个“8”可以根据设计稿改也可以做成参数。singleHeight用 computed 计算只要 props.data 变化它会自动变化滚动循环的边界也随之变化不需要手动去读 DOM 的高度性能更好也不会出现“数据更新后高度还停留在旧值”的问题。visibilitychange里只改isHidden和重置lastTime没有去 cancel 动画帧。这样从后台切回来的时候动画自动恢复不会因为中断导致速度异常。还有一个很多人容易忽略的细节pause()和resume()里都要把lastTime重置为 0。如果不重置从暂停状态恢复时上一次执行和当前执行的时间差会很大delta会被 Math.min 截断到 0.1 秒虽然不会飞出去但速度会在第一帧慢半拍。4.3 接入表格数据时的调用方式使用方式非常简单在父组件里这样写TableScrollList :datatableData :row-height40 :speed35 template #default{ item } div classtable-cell{{ item.name }}/div div classtable-cell{{ item.time }}/div div classtable-cell{{ item.value }}/div /template /TableScrollListslot 的作用是让外层自己决定每一行显示什么内容。大屏项目里同一个滚动容器可能一会儿放告警列表一会儿放设备列表把“滚动逻辑”和“行内容”解耦之后这个组件放到哪个大屏页面里都能复用。5. 常见问题与排查技巧实录5.1 滚动到边界后出现闪跳这是无缝滚动最常见的坑具体表现是表格滚到底部之后瞬间从顶部重新开始肉眼能明显看到“跳”了一下。原因通常有两个第一没有使用双份数据而是单份数据滚到底后直接 offset 0。这是无解的单份数据到底后不闪跳才是怪事所以无缝循环的前提一定是双份或更多份数据。第二双份数据之间被插入了边距或分隔线导致位移 50% 不再等于“一份内容的高度”复位的时候位置差了几像素这几像素的差距肉眼完全能看出来。排查方法也很简单在浏览器里给滚动容器加上临时边框等滚动到复位那一帧截个图对比第一帧和第二份开头的几行差多少像素。这个细节在开发环境的普通显示器上很难察觉往往要到大屏上才看得见所以写代码的时候就从源头避免两份内容之间不要加任何额外间距高度计算全部用程序完成不要手动拼接模板。5.2 标签页切走再回来滚动速度异常现象是大屏开着切到别的应用再切回来表格猛地滚了一大段或者直接停住不动。这个问题的根源我在前面已经提到过requestAnimationFrame 在页面不可见时会被浏览器暂停恢复时传入的time参数会跳跃到当前时间如果你直接用time - lastTime计算增量就会得到一个非常大的 delta导致滚动距离暴增。即使没有暴增定时器在后台被节流回来之后也会产生一堆堆积的回调连续执行现象就是“抽风式”滚动。解决办法就是在step里限制 delta 最大值。我在组件里写的是Math.min((time - lastTime) / 1000, 0.1)这样无论页面离开多久每一帧最多只会按 0.1 秒来计算位移。另外在visibilitychange事件里监听页面可见性状态切回来时重置lastTime从视觉上完全消除速度突变。5.3 数据更新后滚动位置错乱实时数据大屏经常会遇到这种问题新数据推过来了表格内容变了但滚动位置还在一个奇怪的高度要么滚到空白区域要么和新的内容错位。原因在于滚动容器的高度是跟着数据走的数据更新前后单份内容高度变了但滚动 offset 还停留在旧值上。解决思路是监听数据变化在数据更新后把 offset 重置为 0。如果希望更新之后不是从头滚起而是“保持当前滚动比例”可以记录旧高度和新高度把 offset 按比例换算一下const lastSingleHeight singleHeight.value; // 数据更新后 offset.value offset.value * (newSingleHeight / lastSingleHeight);这里有个经验如果是“追加数据”而不是“替换全部数据”最好在更新时记录一下当前 offset 对应的数据索引再换算新的 offset这样用户看到的是“列表连续地长出了新行”而不是从头再来或者跳过一段。大部分客户对这个细节很敏感。5.4 大屏上文字模糊或被裁切表格滚起来了但客户说“字看不清”这是大屏项目另一个经典问题。一般有两个原因。第一个原因是适配没有做等比缩放页面被拉伸导致文字变形。这个问题只能从适配层面解决跟滚动组件关系不大但会让所有文字整体发虚。第二个原因是表格行高设置太小文字在大屏的低分辨率显示下边缘像素不够看起来就不锐利。大屏表格里行高一般不要低于 36px字号不要低于 14px设计稿 1920 下的值缩放之后才勉强清晰。还有被裁切的问题尤其是拼接屏屏幕边缘显示区域不一定是完整的物理像素大屏往往要预留安全区。滚动表格如果正好放在屏幕边缘内容很可能被削掉一块。这种问题在开发环境是看不出来的一定要拿到实际的大屏环境去验证布局范围。5.5 问题排查速查表我在最后给一个速查表方便你以后定位问题现象可能原因解决方案滚动到底后闪跳没有用双份/多份数据或者两份之间有额外间距数据渲染两份位移距离按单份高度计算不加边距后台切回后滚动猛跳rAF 时间戳差过大限制 delta 最大值监听 visibilitychange 重置时间第二次进入大屏动画错乱定时器/动画帧没有清理干净组件卸载时 cancelAnimationFrame清事件监听数据更新后空白或错位单份高度变了offset 没重置数据更新后重置 offset 或按比例换算表格滚动时整个页面卡顿大量重绘回流或阴影滤镜过多用 transform 位移列表项少用阴影减少 DOM 数量悬停暂停后恢复速度异常暂停期间时间戳累积pause 和 resume 里都要把 lastTime 置 0字体发虚或行被裁切适配拉伸行高太小边缘安全区不足等比缩放行高不小于 36px预留安全区6. 写在最后做了这么多年可视化大屏项目我的体会是表格滚动不是一个“能滚起来就行”的功能它背后牵扯到适配、性能、长时稳定这些东西。如果你只是临时写个小屏展示用 CSS 动画就够了但如果是交付给客户、要 7×24 小时跑的大屏项目我建议直接上 requestAnimationFrame transform 这个组合代码不复杂可控性最好也最容易排查问题。最后分享一个小技巧大屏项目验收之前把页面开着放一晚上第二天早上再去看一眼表格滚动是不是还正常。这个习惯帮我发现过好几回隐藏的问题比如某些机器在长时间运行后浏览器会对动画做降频或者某些数据更新逻辑在半夜某个时刻计算出异常值。这些问题白天开发的时候根本不会出现放一晚上就能暴露。