现代浏览器已彻底废弃<marquee>标签，因其从未被W3C纳入HTML规范，属IE私有扩展；应改用CSS @keyframes配合固定容器高度、双倍内容高度及精准位移实现无缝滚动。
用 <marquee> 会直接被现代浏览器忽略
Chrome、Firefox、Edge 等主流浏览器已完全移除对 <marquee> 标签的支持，即使写上也不会滚动，控制台还可能报 Unknown tag marquee 警告。这不是兼容性问题，是标准层面的废弃——W3C 从未将其纳入 HTML 规范，纯属早期 IE 的私有扩展。
实操建议：
- 彻底放弃
<marquee>，包括direction="up"、behavior="scroll"等所有属性 - 不要依赖 CSS
animation模拟<marquee>的“自动循环+无缝衔接”逻辑，那容易在内容高度不整除容器时露白或跳帧 - 若需快速原型验证，可用
<div>+transform: translateY()手动控制位移，但必须自己处理重置时机
CSS @keyframes 实现平滑上下滚动的关键条件
核心不是写动画，而是让文字“看起来无限循环滚动”，这要求：容器高度固定、内容块高度可计算、动画时长与位移严格匹配。
常见错误现象：overflow: hidden 没加导致滚动条出现；动画终点 transform: translateY(-Xpx) 中的 X 不等于内容总高度，造成回弹卡顿。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 外层容器设
height: 200px; overflow: hidden; - 内部包裹元素（如
<div class="marquee-content">）高度 = 单条文字行高 × 行数 × 2（至少重复两遍内容，保证衔接） - 动画
@keyframes scrollUp从transform: translateY(0)到transform: translateY(-Ypx)，其中Y必须等于单遍内容高度 - 动画时长用
duration控制速度，但别设太短（ease 缓动——必须linear，否则位移不匀速
JavaScript 驱动滚动更可控，但要注意重绘和内存
当内容动态加载、行高不一致、或需暂停/加速/点击跳转时，CSS 动画力不从心，必须用 JS。但直接操作 scrollTop 或 transform 在高频 requestAnimationFrame 中易引发重排或掉帧。
使用场景：新闻跑马灯、实时日志流、带交互的公告栏。
实操建议：
- 用
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 上花掉半天——别等上线才发现卡顿，本地真机预览得放在写完第一版动画后立刻做。
