现代浏览器已彻底废弃标签，因其从未被w3c纳入html规范，属ie私有扩展；应改用css @keyframes配合固定容器高度、双倍内容高度及精准位移实现无缝滚动。

用 <marquee></marquee> 会直接被现代浏览器忽略

Chrome、Firefox、Edge 等主流浏览器已完全移除对 <marquee></marquee> 标签的支持，即使写上也不会滚动，控制台还可能报 Unknown tag marquee 警告。这不是兼容性问题，是标准层面的废弃——W3C 从未将其纳入 HTML 规范，纯属早期 IE 的私有扩展。

实操建议：

• 彻底放弃 <marquee></marquee>，包括 direction="up"、behavior="scroll" 等所有属性
• 不要依赖 CSS animation 模拟 <marquee></marquee> 的“自动循环+无缝衔接”逻辑，那容易在内容高度不整除容器时露白或跳帧
• 若需快速原型验证，可用 <div> + <code>transform: translateY() 手动控制位移，但必须自己处理重置时机

  CSS @keyframes 实现平滑上下滚动的关键条件

  核心不是写动画，而是让文字“看起来无限循环滚动”，这要求：容器高度固定、内容块高度可计算、动画时长与位移严格匹配。

  常见错误现象：overflow: hidden 没加导致滚动条出现；动画终点 transform: translateY(-Xpx) 中的 X 不等于内容总高度，造成回弹卡顿。

  实操建议：

  • 外层容器设 height: 200px; overflow: hidden;
  • 内部包裹元素（如 <div class="marquee-content">）高度 = 单条文字行高 × 行数 × 2（至少重复两遍内容，保证衔接） <li>动画 <code>@keyframes scrollUp 从 transform: translateY(0) 到 transform: translateY(-Ypx)，其中 Y 必须等于单遍内容高度
  • 动画时长用 duration 控制速度，但别设太短（ease 缓动——必须 linear，否则位移不匀速

  JavaScript 驱动滚动更可控，但要注意重绘和内存

  当内容动态加载、行高不一致、或需暂停/加速/点击跳转时，CSS 动画力不从心，必须用 JS。但直接操作 scrollTop 或 transform 在高频 requestAnimationFrame 中易引发重排或掉帧。

  
  html-deploy
  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
  下载

  使用场景：新闻跑马灯、实时日志流、带交互的公告栏。

  实操建议：

  • 用 getBoundingClientRect() 获取首行顶部距容器顶部距离，比读 scrollTop 更稳定
  • 每次帧更新只改 transform: translateY(Npx)，避免触发布局（layout）
  • 内容追加后，先 offsetHeight 强制重排，再重置动画起始位置，否则新内容不参与滚动
  • 页面不可见时（document.hidden === true），停掉 requestAnimationFrame，否则后台耗电

  移动端 Safari 滚动卡顿的隐藏原因

  iOS Safari 对 transform 滚动优化差，尤其内容含 box-shadow、border-radius 或多层嵌套 will-change 时，帧率骤降。这不是代码写错，是渲染管线瓶颈。

  性能影响明显：同样代码在 Chrome Desktop 流畅，Safari iOS 上每秒仅 30 帧，肉眼可见抖动。

  实操建议：

  • 滚动区域子元素禁用 box-shadow 和 filter，用纯色背景替代
  • will-change: transform 只加在滚动容器本身，别加在每一行文字上
  • 用 -webkit-overflow-scrolling: touch 仅限于原生滚动场景，CSS 动画滚动中加了反而更卡
  • 真机测试必做：连上 Mac 用 Safari 开发者工具 → “Timelines” 查看 FPS 和渲染耗时

  滚动效果看似简单，但跨浏览器一致性、动态内容适配、移动端性能三者叠加，实际调试时最容易在 Safari 上花掉半天——别等上线才发现卡顿，本地真机预览得放在写完第一版动画后立刻做。