HTML弹幕与滚动评论逻辑冲突，不可混用；<marquee>已废弃且功能缺失；真弹幕需CSS动画+绝对定位+动态节点管理；弹幕层与评论区须DOM隔离并校准时间戳。
HTML 弹幕本身不天然支持“滚动评论”这种混合行为——它要么是纯弹幕（从右向左飞过），要么是传统滚动列表（上下翻动历史）。两者逻辑冲突：弹幕强调实时性与瞬时性，滚动评论强调可回溯与停留。强行混用会出视觉重叠、焦点错乱、内存堆积等问题。
为什么 <marquee> 不能当滚动评论用
<marquee> 是废弃标签，Chrome/Firefox 已默认禁用或降级渲染，Safari 完全不支持。即使强制启用，它只接受静态 HTML 片段，无法动态插入新评论、无法控制 Z-index 层级、无法监听动画结束回调，更没法做防抖、去重、限速等弹幕必需逻辑。
- 浏览器控制台会报
Warning: The <marquee> element is obsolete. - 所有
scrollamount、scrolldelay参数在现代 CSS 动画下失效或表现不一致 - 多个
<marquee>并发滚动时，垂直位置无法随机分布，极易堆叠遮挡
用 CSS @keyframes + transform 实现真弹幕滚动
核心是每个弹幕消息生成独立 DOM 节点，用 position: absolute 定位，靠 translateX() 驱动位移，配合 animationend 事件自动清理节点。
- 必须为每个弹幕设置唯一
id或时间戳类名，避免querySelectorAll批量误删 - 垂直偏移用
top: calc(10% + Math.random() * 60%)生成，避开顶部导航栏和底部控制栏 - 动画时长需动态计算：
duration = (容器宽度 + 弹幕宽度) / 速度，否则快慢不一导致穿插 - 加
will-change: transform提升渲染性能，尤其在低端安卓机上明显
滚动评论区和弹幕共存时的 DOM 隔离方案
不要把弹幕塞进评论列表容器里。必须物理隔离两个区域：
立即学习“前端免费学习笔记（深入）”；
- 弹幕层：全屏
position: fixed; top: 0; left: 0; width: 100%; height: 100%，z-index > 999 - 评论区：固定高度容器（如
max-height: 300px），overflow-y: auto，z-index: 1 - 发送新评论时，同步触发两件事：
appendBarrage(msg)和appendCommentList(msg)，但数据源统一走 WebSocket 消息对象 - 禁用弹幕层的
pointer-events，防止遮挡下方按钮点击
最容易被忽略的是时间戳对齐——弹幕动画启动时刻和 WebSocket 消息到达时刻之间存在毫秒级延迟，若不做补偿，快速连发多条会看起来“卡顿”或“倒序”。建议在服务端注入 server_ts 字段，前端用 performance.now() - server_ts 做动画起始偏移校准。
