推荐用 CSS @keyframes + transform 实现平滑上下滚动，性能好、无 JS 依赖；需双倍复制内容、设 translateY(-200%) 和 linear 动画；JS 控制 scrollTop 适用于交互场景。
直接用 <marquee> 虽能跑起来，但别在新项目里用——它不标准、行为不可控、移动端兼容差，而且 Chrome/Firefox 已逐步限制其暂停逻辑和事件响应。
用 CSS @keyframes + transform 实现平滑循环上下滚动
这是目前最推荐的纯 CSS 方案，性能好、无 JS 依赖、语义清晰。核心是让内容容器固定高度，内部列表双倍复制，靠 transform: translateY() 做位移动画，并用 animation-timing-function: linear 保证匀速。
- 外层容器必须设
height和overflow: hidden，否则滚动会溢出或失效 - 内层列表高度应为单条内容高度 × 条数 × 2（复制一份），动画终点设为
translateY(-200%)，才能无缝衔接 - 动画时长（
animation-duration）要按总高度和期望速度反推：比如单条高 40px、共 5 条，则总高 400px，若希望每秒滚 40px，动画时长就是 10s - 不要用
100%作终点值——它只对应原始列表高度，会导致最后一帧跳变；-200%才能覆盖双倍内容
用 JavaScript 控制 scrollTop 实现可控局部滚动
当广告区是某个 <div> 内部而非整页滚动时，必须操作该容器的 scrollTop，而不是 window。这适合需要暂停、加速、点击跳转等交互的场景。
- CSS 必须提前设置：容器有固定
height，且overflow-y: auto（不能是scroll，否则初始scrollTop可能为 0） - 向上滚动：直接减
step，但需判断是否已到顶：if (container.scrollTop - 向下滚动：加
step后要用Math.min(..., container.scrollHeight - container.clientHeight)截断，否则卡死在最大值，按钮失去响应 - 避免用
setInterval持续累加——浏览器后台标签页会降帧，导致滚动变慢甚至停顿；改用requestAnimationFrame驱动更可靠
鼠标悬停暂停与动态增删内容的处理要点
真实广告栏常需交互控制，但很多实现一加 hover 就抖动、一删条目就重置动画，问题出在状态没管住。
立即学习“前端免费学习笔记（深入）”；
- 暂停不能只靠
animation-play-state: paused：Safari 对该属性在transform动画上的支持不稳定，建议 JS 主动记录当前transform值，悬停时清除定时器，恢复时从原位置继续 - 动态增删公告时，不要
innerHTML = newHTML重绘整个列表——动画会重置、衔接错位；应只appendChild或removeChild，并手动调整transform的translateY值以匹配新高度 - 首尾衔接“咔哒”一声？不是动画问题，而是位移计算误差。检测到
getComputedStyle(el).transform的 Y 值 ≤-itemHeight * count时，立刻设回translateY(0)并继续累加，人眼几乎无法察觉
真正难的不是让字动起来，而是动得稳、停得准、换得顺——尤其是滚动节奏被用户打断又恢复时，位移状态是否连续，决定了体验是“丝滑”还是“卡顿”。
