应使用 CSS 动画而非 ，因其废弃且兼容性差；现代方案用 @keyframes + transform 实现无缝垂直滚动，需复制列表项、合理设置动画时长并启用 GPU 加速。
滚动新闻列表用 <marquee></marquee> 还是 CSS 动画？
<marquee></marquee> 是浏览器原生支持的标签，写起来快，但它是废弃标签，Chrome/Firefox 已移除默认行为，Safari 仅部分支持，实际项目中基本不能用。现代方案必须用 CSS @keyframes + transform 实现平滑滚动，兼容性好、可控性强、能暂停/加速/反向。
如何用纯 CSS 实现无缝垂直滚动？
关键在「无缝」：避免滚动到底部时突然跳回顶部。核心思路是复制一遍新闻项，形成视觉连续流。
- 把所有
<li>复制一份拼在后面（DOM 或伪元素均可），让滚动高度翻倍 - 用
animation: scrollUp 20s linear infinite控制整体位移 - 动画时长要根据内容条数和容器高度算：太短会太快，太长会卡顿；建议初始设为
30s，再微调 - 必须加
will-change: transform触发 GPU 加速，否则 iOS Safari 会掉帧
/* 示例关键 CSS */
@keyframes scrollUp {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
.news-list {
height: 200px;
overflow: hidden;
position: relative;
}
.news-list ul {
animation: scrollUp 30s linear infinite;
margin: 0;
padding: 0;
}
.news-list li {
list-style: none;
line-height: 1.6;
}鼠标悬停暂停滚动，但别影响触摸设备
桌面端需要 hover 暂停，但移动端不能靠 :hover——手指悬停不触发，反而导致误操作。正确做法是用 pointer-events: none 配合媒体查询区分。
- 桌面：直接用
.news-list:hover ul { animation-play-state: paused; } - 移动端：禁用 hover 效果，或改用点击切换暂停状态（需 JS 绑定
touchstart） - 注意：iOS Safari 对
animation-play-state支持良好，但旧版 Android WebView 可能不支持，可降级为 JS 控制style.animationPlayState
新闻数据动态加载时，如何避免滚动重置？
每次用 JS 插入新 <li>，如果直接追加到末尾，滚动位置会被浏览器重置到顶部。这不是 bug，是 DOM 更新后的默认行为。
立即学习“前端免费学习笔记（深入）”；
- 不要用
innerHTML +=，改用insertAdjacentElement('beforeend', newItem) - 插入前记录当前
scrollTop，插入后手动恢复（注意：滚动容器必须是<ul></ul>自身，不是外层<div>）<li>更稳妥的做法：用 CSS <code>scroll-snap-type+ 定高容器，配合 JS 控制「滚动锚点」，但复杂度上升 - 简单场景下，直接替换整个
<ul></ul>内容比增量更新更稳，只要保证新旧 DOM 结构一致，CSS 动画不会中断
滚动新闻看着简单，真正上线时最容易栽在 iOS 帧率、Android WebView 兼容、以及动态更新后的位置丢失上。别省那几行 JS，该用 requestAnimationFrame 控制节奏的地方，就别硬扛 CSS 动画。
