1. 项目概述为什么我们需要列表自动滚动在开发后台管理系统、数据监控大屏或者实时聊天应用时我们经常会遇到一个需求一个数据列表需要自动地、平滑地向上或向下滚动以展示超出可视区域的内容。想象一下股票行情板、新闻快讯栏或者服务器日志监控界面数据在持续更新而用户的视线需要被引导聚焦在最新或最核心的信息流上。手动去拖动滚动条那体验就太糟糕了。这就是“列表自动滚动”功能的核心价值所在——它通过程序控制为用户提供一种“被动接收”但“流畅无感”的数据浏览体验。Vue.js 作为一款渐进式的前端框架其响应式系统和组件化能力为我们实现这种效果提供了极大的便利。但“自动滚动”这四个字背后其实藏着不少门道是平滑滚动还是瞬间跳转滚动到末尾后是循环播放还是停止如何处理用户交互比如鼠标悬停暂停性能开销如何这些都是在动手之前必须想清楚的问题。网上有很多零散的代码片段但往往只解决了“能动起来”这个基本问题缺乏对边界情况、性能细节和用户体验的深入考量。这篇文章我将从一个老前端的角度拆解在 Vue 中实现列表自动滚动的主流方式、核心原理以及那些你在实际项目中一定会踩到的“坑”。2. 核心思路与方案选型不止一种“滚”法实现自动滚动本质上是在操作 DOM 元素的滚动位置。在 Vue 的语境下我们追求的是以“声明式”和“响应式”的方式去达成这个“命令式”的目标。根据滚动容器的不同和滚动效果的差异我们可以梳理出几种主流方案。2.1 方案一操作容器scrollTop/scrollLeft这是最直接、兼容性最好的方法。其原理是对于一个具有固定高度和overflow-y: scroll样式的容器我们通过 JavaScript 定时修改其scrollTop属性值使其内容向上移动。为什么首选这个方案因为它直接操作了滚动行为的根本属性不依赖任何复杂的 CSS 或 DOM 结构变换。无论是ul/li组成的列表还是div包裹的复杂卡片只要它们在一个可滚动的容器内这个方法就适用。它给了我们最精细的控制权滚动的速度、步长、缓动效果都可以通过计算scrollTop的值来实现。核心考量点性能直接且高频地修改scrollTop会触发浏览器的重排Reflow与重绘Repaint。虽然现代浏览器优化得很好但在低端设备或超长列表下仍需注意。平滑度简单地使用setInterval每次增加固定像素如scrollTop 1滚动会显得生硬卡顿。追求平滑感通常需要与requestAnimationFrame结合或者使用 CSStransition来辅助但直接改scrollTop无法触发 CSS 过渡。2.2 方案二CSS3animation与keyframes我们可以利用 CSS 的动画能力让容器内的内容一个包裹层进行transform: translateY移动。通过定义无限循环infinite的keyframes动画实现自动滚动效果。为什么这个方案有吸引力最大的优势是性能。现代浏览器对 CSS 动画特别是transform和opacity进行了重度优化通常会开启 GPU 加速动画过程在合成层中完成避免了对主线程布局和绘制的冲击因此格外流畅即使列表很长、滚动很快。核心考量点内容高度必须确定CSS 动画需要预先知道滚动的总距离。如果列表内容是动态加载的高度会变化那么动画的关键帧就需要用 JavaScript 动态计算并注入失去了纯 CSS 的简洁性。交互控制复杂暂停动画animation-play-state: paused相对容易但想要在暂停后从中断点继续或者跳转到某个特定位置就需要结合 JavaScript 来获取和设置动画的当前进度操作起来比直接控制scrollTop要麻烦。滚动条行为使用transform移动的是内容容器本身的scrollTop始终为 0这意味着原生的滚动条将无法正确反映当前的滚动位置通常需要隐藏原生滚动条这可能会影响部分用户的习惯。2.3 方案三使用现有 UI 库组件如vxe-table很多优秀的 Vue UI 组件库已经内置了表格自动滚动的功能。例如搜索热词中提到的vxe-table就支持通过配置scroll-x和scroll-y的相关属性来实现自动滚动。为什么考虑这个方案省心、稳定、功能全面。如果你项目本身就在使用vxe-table或类似的表格组件并且自动滚动的需求恰好是在表格上那么直接使用组件库提供的功能是最佳选择。这些功能通常经过大量测试处理了各种边界情况并且与组件本身的其他功能如排序、筛选、固定列能完美协同。核心考量点耦合性你的滚动需求被绑定在了特定的 UI 库上。如果未来需要更换 UI 库或者你的滚动容器根本不是表格这个方案就无效了。定制灵活性组件库提供的配置项是有限的。如果你需要非常特殊的滚动效果比如非线性的滚动速度、与复杂交互深度绑定可能无法通过配置实现需要去啃源码甚至修改它成本反而更高。我的选型心得对于大多数非表格型的列表滚动需求如新闻列表、日志流、跑马灯方案一操作 scrollTop是平衡了控制力、兼容性和实现复杂度的首选。它就像手动挡汽车虽然需要自己换挡但能去任何地方。而方案二CSS动画则是性能冠军适合那些内容固定、追求极致流畅视觉效果的场景比如一些大屏展示的静态数据流。方案三则是在特定上下文下的“捷径”。本系列文章一我们将深入探讨最基础的方案一把它吃透。3. 基础实现基于scrollTop的定时滚动让我们从最经典的实现开始。我们将创建一个 Vue 组件它包含一个可滚动的容器和一个列表。通过setInterval定时器逐步增加容器的scrollTop值实现自动向上滚动。3.1 组件结构与样式准备首先搭建一个基础的组件框架。我们创建一个名为AutoScrollList.vue的文件。template div classauto-scroll-container !-- 这是一个固定高度的滚动容器 -- div refscrollContainer classscroll-content mouseenterpauseScroll mouseleaveresumeScroll !-- 列表内容其高度会超过容器 -- ul classitem-list li v-foritem in list :keyitem.id classlist-item {{ item.content }} /li /ul !-- 为了实现无缝循环我们通常需要一份内容的副本 -- ul v-ifisLoop classitem-list item-list-copy li v-foritem in list :keycopy-${item.id} classlist-item {{ item.content }} /li /ul /div /div /template script export default { name: AutoScrollList, props: { // 列表数据 list: { type: Array, required: true, default: () [] }, // 滚动速度像素/秒 speed: { type: Number, default: 40 }, // 是否开启循环滚动 isLoop: { type: Boolean, default: true }, // 滚动方向up 或 down direction: { type: String, default: up, validator: (value) [up, down].includes(value) } }, data() { return { scrollTimer: null, // 定时器ID isPaused: false, // 是否被暂停如鼠标悬停 currentScrollTop: 0 // 当前滚动位置用于某些计算 }; }, mounted() { // 组件挂载后开始滚动 this.startScrolling(); }, beforeDestroy() { // 组件销毁前务必清理定时器防止内存泄漏 this.stopScrolling(); }, methods: { startScrolling() { // 核心滚动逻辑将在后面实现 }, pauseScroll() { this.isPaused true; this.stopScrolling(); }, resumeScroll() { if (this.isPaused) { this.isPaused false; this.startScrolling(); } }, stopScrolling() { if (this.scrollTimer) { clearInterval(this.scrollTimer); this.scrollTimer null; } } } }; /script style scoped .auto-scroll-container { width: 100%; height: 300px; /* 容器固定高度 */ overflow: hidden; /* 隐藏容器自身的溢出 */ position: relative; } .scroll-content { width: 100%; height: 100%; overflow-y: auto; /* 内容区域可滚动 */ /* 隐藏默认滚动条根据设计需求决定 */ /* scrollbar-width: none; */ /* Firefox */ /* -ms-overflow-style: none; */ /* IE and Edge */ } /* .scroll-content::-webkit-scrollbar { display: none; } */ /* Chrome, Safari, Opera*/ .item-list { margin: 0; padding: 0; list-style: none; } .list-item { padding: 12px 16px; border-bottom: 1px solid #eee; line-height: 1.5; /* 禁止文本选择避免拖动时误选文字 */ user-select: none; } /* 副本列表的样式通常与原始列表一致 */ .item-list-copy { /* 在无缝滚动实现中会用到 */ } /style这段代码搭建了基本的骨架一个固定高度的容器里面装着我们的列表。我们通过ref获取了容器 DOM 的引用并预留了鼠标悬停暂停/继续的交互。同时我们为“循环滚动”准备了一个列表副本这是实现无缝滚动的关键技巧之一。3.2 核心滚动逻辑实现现在我们来填充startScrolling方法的核心逻辑。我们将使用setInterval来驱动滚动。startScrolling() { // 确保在启动前清除可能存在的旧定时器 this.stopScrolling(); const container this.$refs.scrollContainer; if (!container) return; // 计算每次滚动的像素量。speed是像素/秒我们每16ms约60帧执行一次。 // 这样每秒滚动的像素 stepPerFrame * (1000 / 16) ≈ speed const stepPerFrame this.speed / 60; // 60 FPS const isUp this.direction up; this.scrollTimer setInterval(() { if (this.isPaused) return; // 如果暂停则跳过本次滚动 // 1. 获取当前的滚动位置 let currentScrollTop container.scrollTop; // 2. 计算下一个滚动位置 let nextScrollTop; if (isUp) { nextScrollTop currentScrollTop stepPerFrame; } else { nextScrollTop currentScrollTop - stepPerFrame; } // 3. 边界检查与处理非循环模式 if (!this.isLoop) { const maxScrollTop container.scrollHeight - container.clientHeight; const minScrollTop 0; if ((isUp nextScrollTop maxScrollTop) || (!isUp nextScrollTop minScrollTop)) { // 到达边界停止滚动 this.stopScrolling(); // 可选将位置精确设置为边界值 container.scrollTop isUp ? maxScrollTop : minScrollTop; return; } } // 4. 应用新的滚动位置 container.scrollTop nextScrollTop; // 5. 循环滚动的特殊处理将在下一节详细展开 // 这里先预留位置基础版本暂不实现无缝循环 this.handleLoopScroll(container, currentScrollTop, nextScrollTop, isUp); }, 16); // 约60FPS的间隔 }代码解析与注意事项定时器间隔16ms我们选择了约16毫秒的间隔目标是匹配60Hz的屏幕刷新率1000ms / 60 ≈ 16.67ms。这能使滚动动画看起来更连贯。但请注意setInterval并不能保证精确的时间间隔它只是“大约”在这个时间后执行。对于更平滑的动画requestAnimationFrame是更好的选择我们会在进阶部分讨论。步长计算stepPerFrame speed / 60。如果speed设置为60像素/秒那么每帧大约滚动1像素。你可以通过调整speed属性轻松控制整体滚动速度。边界处理非循环当isLoop为false时我们计算了容器的最大可滚动距离scrollHeight - clientHeight。一旦即将越界就停止定时器。这是一个重要的用户体验细节防止列表滚动到“虚无”的地方。直接赋值scrollTop这是实现滚动的核心语句。浏览器会负责接下来的渲染工作。实操心得一关于setInterval的精度问题在实际测试中setInterval的 callback 执行可能会因为主线程繁忙JS执行、垃圾回收等而延迟导致滚动卡顿或忽快忽慢。虽然对于很多要求不高的场景这已经足够但如果你追求丝滑或者在低性能设备上运行这个问题会被放大。一个简单的改进是在每次执行时计算自上次滚动以来实际经过的时间然后根据时间和速度动态计算本次应滚动的距离而不是固定步长。这能保证滚动距离与时间成正比而不是与执行次数成正比。4. 进阶实现无缝循环滚动与性能优化基础版本在滚动到底部后会停止。但对于像跑马灯、连续播报这样的场景我们需要“无缝循环”效果当最后一条内容滚出视野时第一条内容紧接着从底部出现形成无限循环的错觉。4.1 实现无缝循环滚动的原理无缝循环的核心技巧是内容复制。我们准备两份完全相同的内容A和A‘将它们首尾相连地放在滚动容器里。初始时显示内容A。容器向上滚动A的内容逐渐上移。当A的最后一项完全滚出容器顶部时A‘的第一项正好进入容器底部。此时容器的scrollTop已经接近内容A的高度。在用户毫无感知的情况下瞬间将scrollTop重置为0即跳回到内容A的顶部。由于A和A‘内容完全一样这个“跳跃”在视觉上是连续的。重复步骤2-4实现无限滚动。4.2 修改组件模板与逻辑首先我们需要确保模板中已经包含了副本前面代码已预留.item-list-copy。然后修改startScrolling方法中预留的handleLoopScroll函数。// 在 methods 中新增 handleLoopScroll 方法 handleLoopScroll(container, currentScrollTop, nextScrollTop, isUp) { if (!this.isLoop) return; const singleListHeight container.firstElementChild?.scrollHeight || 0; // 获取单份列表的高度 if (singleListHeight 0) return; const maxScrollTopForLoop singleListHeight; // 循环判断的临界点是一份内容的高度 const minScrollTopForLoop 0; // 向上滚动时的重置判断 if (isUp nextScrollTop singleListHeight) { // 当即将滚动超过一份内容的高度时瞬间跳回顶部 container.scrollTop nextScrollTop - singleListHeight; // 注意这里没有修改 nextScrollTop 变量因为本次定时器回调中 container.scrollTop 已被设置。 // 下一次定时器触发时会基于新的 scrollTop 值计算。 } // 向下滚动逻辑类似方向相反 // else if (!isUp nextScrollTop -singleListHeight) { ... } }关键点解析singleListHeight这是实现无缝滚动的关键参数。它必须是一份完整列表内容的渲染后高度。我们通过container.firstElementChild.scrollHeight来获取。确保在列表数据渲染完成后再启动滚动在mounted钩子中调用this.$nextTick后再启动是更稳妥的做法。重置时机当nextScrollTop计算出的下一个位置大于等于singleListHeight时意味着原始内容A已经完全滚出视野副本A‘已经占据了可视区域。此时我们将scrollTop减去singleListHeight视觉上就回到了内容A的起始点但用户看到的是连续不断的A‘的内容。视觉连续性这个“跳跃”发生在一次渲染帧内因为scrollTop的赋值是同步的。只要两份内容视觉上完全一致用户就无法察觉这个跳跃。4.3 性能优化用requestAnimationFrame替代setIntervalrequestAnimationFrame(rAF) 是浏览器专门为高性能动画提供的 API。它会在下一次浏览器重绘之前调用你指定的函数通常频率是每秒60次并与浏览器的刷新率同步。这能带来两大好处1) 动画更平滑避免丢帧2) 当页面处于非激活状态如标签页被隐藏时动画会自动暂停节省 CPU 和电池。让我们重写滚动驱动部分startScrolling() { this.stopScrolling(); // 先停止之前的动画帧请求 if (this.isPaused) return; const container this.$refs.scrollContainer; if (!container) return; const isUp this.direction up; let lastTimestamp 0; // 记录上一帧的时间戳 const speedPerMs this.speed / 1000; // 速度单位转换为 像素/毫秒 const animateScroll (timestamp) { // 如果是第一帧初始化时间戳 if (!lastTimestamp) lastTimestamp timestamp; // 计算距离上一帧过去的时间毫秒 const deltaTime timestamp - lastTimestamp; lastTimestamp timestamp; // 计算这一帧应该滚动的距离 const distanceThisFrame speedPerMs * deltaTime; let currentScrollTop container.scrollTop; let nextScrollTop; if (isUp) { nextScrollTop currentScrollTop distanceThisFrame; } else { nextScrollTop currentScrollTop - distanceThisFrame; } // 边界处理非循环模式 if (!this.isLoop) { const maxScrollTop container.scrollHeight - container.clientHeight; const minScrollTop 0; if ((isUp nextScrollTop maxScrollTop) || (!isUp nextScrollTop minScrollTop)) { container.scrollTop isUp ? maxScrollTop : minScrollTop; return; // 停止动画循环 } } // 应用滚动 container.scrollTop nextScrollTop; // 无缝循环处理 this.handleLoopScroll(container, currentScrollTop, nextScrollTop, isUp); // 请求下一帧形成循环 this.scrollAnimationId requestAnimationFrame(animateScroll); }; // 启动动画循环 this.scrollAnimationId requestAnimationFrame(animateScroll); } stopScrolling() { // 清除定时器 if (this.scrollTimer) { clearInterval(this.scrollTimer); this.scrollTimer null; } // 取消动画帧请求 if (this.scrollAnimationId) { cancelAnimationFrame(this.scrollAnimationId); this.scrollAnimationId null; } }优化带来的改变deltaTime这是 rAF 方案的精髓。通过计算两帧之间的实际时间差乘以“像素/毫秒”的速度我们得到了精确的本帧应滚动距离。这确保了无论帧率如何波动比如在性能较差的机器上掉到30帧滚动的物理速度是恒定的视觉上不会忽快忽慢。自动暂停当用户切换到其他浏览器标签时requestAnimationFrame会自动暂停回调滚动停止。切换回来时它会自动继续并且deltaTime会包含页面隐藏的时间可能会造成一次“跳跃”。对于自动滚动列表这个跳跃通常可以接受或者我们可以通过判断deltaTime过大比如大于1秒来忽略这一次的滚动计算。scrollAnimationId我们用这个变量来存储 rAF 返回的 ID以便在stopScrolling时能正确取消。实操心得二scrollHeight获取时机与列表动态更新在实现无缝滚动时singleListHeight的准确获取至关重要。如果你的列表数据是异步获取的或者在滚动过程中会动态增加/减少那么singleListHeight就需要动态更新。一个可靠的做法是在startScrolling函数内部每次或在特定时机如列表数据变化后都重新计算singleListHeight。可以将计算逻辑封装成一个方法并在animateScroll函数中或通过 Vue 的watch监听列表数据变化来调用。否则当列表高度变化后继续使用旧的高度值会导致重置点计算错误出现跳屏或空白。5. 交互增强与边界情况处理一个健壮的自动滚动组件不能只管“滚”还要考虑用户如何与它交互以及各种边界情况。5.1 鼠标悬停暂停与继续我们已经在前面的模板中通过mouseenter和mouseleave绑定了事件。这里再强调一下实现要点pauseScroll() { this.isPaused true; this.stopScrolling(); // 立即停止滚动动画 // 注意这里只是停止了动画驱动scrollTop 停留在当前位置。 }, resumeScroll() { // 只有当之前是暂停状态时才恢复 if (this.isPaused) { this.isPaused false; // 恢复时从当前位置继续滚动。 // 对于 rAF 方案直接调用 startScrolling 即可它会基于当前 scrollTop 继续。 this.startScrolling(); } }用户体验细节暂停时滚动立即停止这符合直觉。但恢复时如果使用固定步长的setInterval方案可能会有一点“卡顿”感因为定时器重新启动的时机是随机的。而requestAnimationFrame方案则能更平滑地衔接。5.2 处理内容高度不足的情况如果列表内容太少容器本身就没有出现滚动条即scrollHeight clientHeight那么自动滚动就没有意义甚至可能导致错误计算。// 在 startScrolling 方法开始时加入判断 startScrolling() { const container this.$refs.scrollContainer; if (!container) return; // 检查内容是否足以滚动 if (container.scrollHeight container.clientHeight 1) { // 加1避免浮点数误差 console.warn(AutoScrollList: 内容高度不足无需启动自动滚动。); return; } // ... 其余启动逻辑 }5.3 组件销毁时的资源清理这是一个必须养成的习惯防止内存泄漏。我们在beforeDestroy生命周期钩子中调用stopScrolling。beforeDestroy() { this.stopScrolling(); }5.4 响应式配置更新如果组件的speed、direction或isLoop等属性需要支持动态修改我们需要监听这些变化并重新启动滚动以应用新配置。watch: { speed() { if (!this.isPaused) { this.stopScrolling(); this.$nextTick(() this.startScrolling()); } }, direction() { if (!this.isPaused) { this.stopScrolling(); this.$nextTick(() this.startScrolling()); } }, isLoop() { // 循环模式切换可能涉及DOM结构变化如副本的添加/移除需要等视图更新 this.$nextTick(() { if (!this.isPaused) { this.stopScrolling(); this.startScrolling(); } }); } }实操心得三$nextTick的重要性在修改了影响 DOM 结构的属性如isLoop控制是否渲染副本列表后必须使用this.$nextTick()来确保 Vue 已经完成了虚拟 DOM 的修补和真实 DOM 的更新然后再去获取新的scrollHeight或操作 DOM 元素。否则你获取到的是旧视图的状态会导致计算错误。这是一个在 Vue 中处理依赖 DOM 的异步操作时的通用最佳实践。6. 完整组件代码与使用示例将上述所有部分整合我们得到一个相对完整的AutoScrollList.vue组件。这里给出使用示例。组件使用示例template div h3实时日志监控/h3 AutoScrollList :listlogList :speed50 :is-looptrue directionup classlog-container / button clickaddLog模拟新增日志/button /div /template script import AutoScrollList from ./components/AutoScrollList.vue; export default { components: { AutoScrollList }, data() { return { logList: [], logIndex: 1 }; }, created() { // 初始化一些日志 for (let i 0; i 20; i) { this.logList.push({ id: i, content: 系统启动日志 [${this.getCurrentTime()}] 初始化模块 ${i 1}... }); } // 模拟实时日志推送 setInterval(() { this.addLog(); }, 2000); }, methods: { getCurrentTime() { return new Date().toLocaleTimeString(); }, addLog() { this.logList.push({ id: Date.now() this.logIndex, content: 应用日志 [${this.getCurrentTime()}] 处理了新任务 #${this.logIndex} }); // 如果日志太多可以移除最老的一条保持列表长度 // if (this.logList.length 50) { // this.logList.shift(); // } } } }; /script style scoped .log-container { border: 1px solid #ccc; border-radius: 4px; background-color: #f9f9f9; } /style最终组件代码要点回顾核心驱动优先使用requestAnimationFrame实现与刷新率同步的平滑滚动。无缝循环通过复制内容并巧用scrollTop重置实现。交互友好支持鼠标悬停暂停/继续。健壮性处理了内容不足、动态数据更新、配置变更、组件销毁等边界情况。可配置通过props暴露speed、direction、isLoop等参数适应不同场景。7. 常见问题与排查技巧实录在实际使用中你可能会遇到一些意想不到的问题。这里记录了几个典型问题及其解决方法。问题1滚动速度不稳定时快时慢。排查如果你使用的是setInterval这是典型问题。浏览器的 JS 执行并非严格实时setInterval的回调可能会被延迟。解决切换到requestAnimationFrame方案并基于deltaTime计算滚动距离。这是根除此问题的最佳实践。问题2无缝滚动时在重置点出现明显的“闪烁”或“跳动”。排查1检查两份列表原列表和副本的样式是否100%一致。哪怕一个margin或padding的差异都会在重置时被肉眼察觉。解决1确保用于渲染列表的 CSS 类是同一个或者副本的样式完全复制原列表。在 Vue 中使用相同的模板和:class绑定。排查2singleListHeight计算不准确。可能在列表渲染完成前就进行了计算或者列表内容动态变化后没有重新计算。解决2在mounted或列表数据更新后使用this.$nextTick(() { ... })确保 DOM 更新完毕再计算高度。对于动态列表考虑在animateScroll函数中定期或根据条件重新获取高度。问题3在滚动过程中操作其他部分界面变得卡顿。排查高频的scrollTop赋值会触发浏览器的重排Reflow如果列表结构复杂或页面有其他复杂布局可能会阻塞主线程。解决优化 CSS为滚动容器及其子元素添加will-change: transform;或transform: translateZ(0);需谨慎有副作用尝试将滚动层提升到独立的合成层。降低频率如果不要求极致的平滑可以适当降低requestAnimationFrame中的更新频率例如累计时间差每30ms更新一次位置。简化 DOM检查列表项的 DOM 结构是否过于复杂。减少不必要的嵌套和节点数量。虚拟列表对于超长列表成千上万条上述任何优化都治标不治本。终极方案是实现“虚拟列表”只渲染可视区域及附近的部分 DOM 元素。但这超出了基础自动滚动的范畴是一个更高级的话题。问题4鼠标悬停暂停后再移开滚动没有从暂停的位置继续而是跳了一下。排查这通常发生在setInterval方案中。暂停时定时器被清除但记录的时间戳或步进状态被重置了。恢复时新的定时器从新的“节拍”开始与暂停前的状态不连续。解决使用requestAnimationFrame方案可以自然解决因为它基于每一帧的真实时间差。如果坚持用setInterval需要在暂停时记录当前的scrollTop和已滚动时间或一个进度比例恢复时从这个状态重新计算起始点而不是简单地重新开始一个循环。问题5在移动端触摸滚动时自动滚动与原生滚动冲突。排查用户触摸拖动时自动滚动应该停止用户松手后自动滚动可以恢复或重新开始。解决监听容器的touchstart、touchmove、touchend事件。在touchstart时暂停自动滚动在touchend后延迟一段时间例如300ms再恢复以避免误触发。这需要更精细的交互状态管理。实现一个看似简单的自动滚动列表从“能动”到“好用、耐用”中间隔着无数细节的考量。方案一为我们打下了坚实的基础理解了最本质的scrollTop操作和动画循环原理。在下一篇中我们将探索方案二——利用 CSS 动画实现更高效、更炫酷的滚动效果并对比两种方案的优劣帮你做出最适合自己项目的选择。记住没有最好的方案只有最合适的场景。
