纯CSS无法实现真正可靠的无缝循环滚动广告，必须结合DOM结构控制与像素级位移逻辑，因translateX(-100%)依赖父容器宽度，而实际内容渲染宽度受字体、空格、缩放等影响常不匹配，导致露白或跳帧。
纯 CSS 实现不了真正可靠的无缝循环滚动广告——marquee 标签早已被废弃，而仅靠 @keyframes + translateX 的简单动画，在内容宽度不整除容器、字体渲染差异、缩放或动态加载时，大概率会在末尾露出空白或跳帧。必须结合 DOM 结构控制与像素级位移逻辑。
为什么 translateX(-100%) 动画会露白
常见写法里用 padding-left: 100% 把文字推到右侧，再用 animation: scroll 5s linear infinite 从 translateX(0) 移到 translateX(-100%)。问题在于：-100% 是相对父容器宽度计算的，但实际滚动内容（比如多段文字拼接）的总渲染宽度往往 ≠ 容器宽 × 2，尤其当含中英文混排、空格、letter-spacing 或字体加载延迟时。结果就是动画终点没对齐起点，视觉上“断了一拍”。
解决思路不是调速或加 delay，而是让动画位移距离严格等于「内容块真实宽度」：
- 用
getBoundingClientRect().width或offsetWidth读取.scroll-item的实际像素宽 - 动画只移动这个精确值，而非百分比
- 结构上至少复制一次内容，形成可平铺单元
scrollLeft + JavaScript 动态追加更稳
适合广告位需支持用户手动拖拽、滚动到底部自动续内容、或内容异步加载的场景。核心是监听 scrollLeft 接近 scrollWidth - clientWidth 时，把原始节点 clone 后 append 到末尾，并立即修正 scrollLeft 值，避免跳动。
关键点：
- 必须节流
scroll事件，否则快速拖拽时频繁触发导致卡顿 - 追加后要等下一次重排完成（可用
requestAnimationFrame）再调整scrollLeft - 长期运行需清理过期节点，比如只保留最近 3 份副本，防止 DOM 膨胀
- 若广告图带懒加载，追加后需手动调用
img.loading = 'eager'或触发 IntersectionObserver
响应式下宽度变化怎么同步重算
窗口 resize、横竖屏切换、或 font load 完成都可能改变内容实际宽度。不能只在初始化时算一次 itemWidth。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
稳妥做法：
- 监听
resize和load（针对图片/字体）事件 - 用
ResizeObserver监听.scroll-track宽度变化（兼容性 OK，2026 年已覆盖全部主流浏览器） - 重算后，暂停当前动画，重置
transform或scrollLeft，再恢复——否则新旧宽度错位会导致瞬移
广告位必须考虑的可访问性与性能
滚动广告本质是运动动画，WCAG 明确要求：用户应能暂停、停止或隐藏自动播放的滚动内容。别只加个「暂停按钮」就完事。
实操要点：
- 用
prefers-reduced-motion: reduceCSS 媒体查询自动禁用动画，并设为默认行为 - 暂停按钮需用
aria-pressed控制状态，且焦点可到达（tabindex="0"） - 避免在
requestAnimationFrame中反复读写offsetWidth，改用getComputedStyle缓存或 ResizeObserver 输出 - 广告图务必加
decoding="async"和fetchpriority="low"，防止阻塞主滚动流
最易被忽略的一点：广告文案若含链接，滚动过程中焦点管理极易失控。用户按 Tab 键时，焦点不该随内容滚动“消失”，而应始终落在当前可视区域内的第一个可交互元素上——这需要配合 focusable 属性与手动 focus() 调度，不是加个 tabindex 就能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
