现代浏览器已彻底移除对<marquee>标签的支持，direction属性无效；滚动需用CSS transform配合keyframes实现，水平用translateX()、垂直用translateY()，并严格匹配容器、内容与位移数值。
别用 direction 属性控制滚动方向——它对滚动无效，且现代浏览器已完全忽略 <marquee> 标签。 真正起作用的是 CSS 的 transform 位移方向和动画关键帧逻辑，不是 HTML 属性。
为什么 direction="up" 在现代浏览器里不滚动
Chrome、Firefox、Edge 等已彻底移除对 <marquee> 的支持，控制台会报 Unknown tag marquee；W3C 从未将其纳入标准，纯属 IE 时代遗留。哪怕写上 direction="left" 或 behavior="alternate"，页面也不会渲染任何滚动效果。
- 不是“兼容性差”，是“根本没实现”
-
direction在 CSS 中只影响文本排版（如ltr/rtl），跟滚动路径无关 - 试图用 JS 动态改
marquee.direction也毫无意义——DOM 节点都不存在了
transform: translateX() 和 translateY() 怎么选方向
水平滚动用 translateX()，垂直滚动用 translateY()；正负号决定起点与终点，不是“方向属性”。
- 向左滚动：动画从
translateX(100%)→translateX(-100%)（内容从右外进入，滚到左外消失） - 向右滚动：反过来，
translateX(-100%)→translateX(100%) - 向上滚动：
translateY(0)→translateY(-Ypx)，其中Y必须等于单遍内容高度，否则衔接断层 - 向下滚动：起点
translateY(-Ypx)，终点translateY(0)，或用双倍内容+循环位移更稳
CSS 动画实现无缝滚动的关键条件
看起来“无限滚动”，靠的不是 magic，而是容器、内容、位移三者严格匹配。
- 外层容器必须设
height+overflow: hidden，否则滚动条暴露或布局塌陷 - 内部滚动块（如
<div class="marquee-content">）高度至少为单遍内容的 2 倍，保证动画终点时下半段刚好接上开头 - @keyframes 中的位移值不能写百分比（除非父容器高度固定且可预测），推荐用
px精确控制 - 动画必须用
animation-timing-function: linear，ease会导致速度不均、视觉卡顿 -
animation-iteration-count: infinite缺一不可，漏写就只跑一遍
JavaScript 动态切换方向时最常踩的坑
想点击按钮就反转滚动？别操作伪属性，要动真格的 CSS 类和动画重置。
- 不要直接改
style.animationName，必须同步重置animationDuration、animationTimingFunction，否则动画冻结 - 读取当前
animationName不可靠——浏览器可能返回空字符串或 fallback 名，应维护一个isScrollingUp = true这样的状态变量 - 切换方向时，先
element.style.animation = 'none'强制终止当前帧，再设置新动画名并offsetHeight触发重排，最后恢复animation - 移动端 Safari 对
transform滚动敏感，若内容含box-shadow或多层will-change，帧率会骤降，建议关掉阴影或降级为scrollTop（仅限垂直）
真正难的不是写出第一行滚动代码，而是让两屏文字在边界处严丝合缝地交接——这要求你亲手算清行高、容器高、动画时长之间的数值关系，而不是依赖某个“direction=up”就万事大吉。
