推荐用 css @keyframes + transform 实现平滑上下滚动，性能好、无 js 依赖；需双倍复制内容、设 translatey(-200%) 和 linear 动画；js 控制 scrolltop 适用于交互场景。

直接用 <marquee></marquee> 虽能跑起来，但别在新项目里用——它不标准、行为不可控、移动端兼容差，而且 Chrome/Firefox 已逐步限制其暂停逻辑和事件响应。

用 CSS @keyframes + transform 实现平滑循环上下滚动

这是目前最推荐的纯 CSS 方案，性能好、无 JS 依赖、语义清晰。核心是让内容容器固定高度，内部列表双倍复制，靠 transform: translateY() 做位移动画，并用 animation-timing-function: linear 保证匀速。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 外层容器必须设 height 和 overflow: hidden，否则滚动会溢出或失效
• 内层列表高度应为单条内容高度 × 条数 × 2（复制一份），动画终点设为 translateY(-200%)，才能无缝衔接
• 动画时长（animation-duration）要按总高度和期望速度反推：比如单条高 40px、共 5 条，则总高 400px，若希望每秒滚 40px，动画时长就是 10s
• 不要用 100% 作终点值——它只对应原始列表高度，会导致最后一帧跳变；-200% 才能覆盖双倍内容

用 JavaScript 控制 scrollTop 实现可控局部滚动

当广告区是某个 <div> 内部而非整页滚动时，必须操作该容器的 <code>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) 并继续累加，人眼几乎无法察觉

真正难的不是让字动起来，而是动得稳、停得准、换得顺——尤其是滚动节奏被用户打断又恢复时，位移状态是否连续，决定了体验是“丝滑”还是“卡顿”。