真正能落地的新闻滚动方案是纯css+少量js控制transform位移+requestanimationframe驱动，需无缝循环结构、固定容器尺寸、动态速度调节、鼠标悬停暂停及移动端适配。
滚动条用 marquee 就够了，但别真用它
现代浏览器虽还支持 marquee，但它早被 W3C 废弃，不响应 CSS 动画控制、无法暂停、无障碍支持为零。实际项目里硬塞 marquee，等于主动放弃可访问性、SEO 和移动端兼容——尤其新闻滚动这种需用户随时介入的场景。
真正能落地的方案是：用纯 CSS + 少量 JS 控制 transform 位移 + requestAnimationFrame 驱动。核心不是“怎么动”，而是“怎么可控地动”。
- 滚动内容必须包裹在固定高度容器内，否则会撑开布局
- 所有新闻项要用
display: inline-block或flex横向排列，不能靠空格或换行符分隔 - 滚动方向由
translateX()或translateY()决定，横向滚就别写rotate()这种干扰项
HTML 结构必须满足“无缝循环”条件
用户看到的“无限滚动”，本质是首尾拼接后快速切换位置。如果 HTML 里只写一遍新闻列表，滚动到末尾就会卡顿或跳回起点——这不是动画问题，是结构缺陷。
正确做法是把新闻列表复制一份拼在后面，再用 CSS 控制可视区域只显示前半段；当滚动到副本起点时，立刻重置位移回原点，人眼察觉不到跳变。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 原始列表用
<div class="news-list"> 包裹，副本用 <code><div class="news-list news-list--clone"> <li>两个列表必须完全相同（包括空格、换行、内联样式），否则宽度计算偏差会导致错位</li> <li>容器设 <code>overflow: hidden，且高度/宽度严格固定，不能用min-height -
speed单位建议用px/s（如40），而非固定translate步长，便于适配不同屏幕密度 - 监听
mouseenter/mouseleave，不要用hover伪类——移动端没 hover - 重置位移时用
element.style.transform = 'translateX(0)'，别依赖transition动画，否则会延迟归位 - 加
touch-action: none到滚动容器，禁用浏览器默认拖拽行为 - 在
meta viewport中明确写user-scalable=no，否则双指一捏就毁布局 - 用
will-change: transform触发 GPU 加速，但只加在动画元素上，别滥用到父容器
JS 控制滚动速度和暂停逻辑的关键参数
新闻滚动不是越快越好。太快用户来不及读标题，太慢又显得滞涩。真实场景中，速度得按内容长度动态调整，且必须支持鼠标悬停暂停——这是刚需，不是锦上添花。
用 requestAnimationFrame 替代 setInterval，避免帧率抖动；暂停时清除动画帧，恢复时重新启动，而不是简单改 css transition。
移动端适配最容易漏掉的三件事
PC 上跑得飞起的滚动条，到 iPhone 上可能直接静止、错位或触发双指缩放。这不是 bug，是没处理 touch 行为和视口缩放。
滚动条本身没有“热点”属性，所谓热点新闻，靠的是后端接口实时推送新数据、前端定时轮询或 WebSocket 更新 DOM。滚动只是呈现层，别指望靠 CSS 实现内容热力排序。
