direction="left" 表示文字从右向左移动（视觉上向左滚），但若容器设 dir="rtl" 或 css direction: rtl 会干扰行为；旧版 ie 可能将 direction 当作“起始边”导致反向；大小写错误或拼写错误会被忽略并默认回退为 "left"。
HTML <marquee></marquee> 的 direction 属性只接受固定字符串值，不能动态计算或绑定变量；现代浏览器已弃用该标签，不建议在新项目中使用。
为什么 direction 设成 "left" 却往右滚？
常见错因是混淆了“滚动方向”和“内容位移方向”：
direction="left" 表示文字从右向左移动（视觉上向左滚），但若容器有 dir="rtl" 或 CSS direction: rtl，会干扰行为；部分旧版 IE 还会把 direction 当作“起始边”，导致反向。
- 始终用英文小写：
"left"、"right"、"up"、"down"—— 大写或拼写错误（如"Left"）会被忽略，默认回退为"left" - 避免在
<marquee></marquee>上叠加style="direction: rtl"，二者冲突时表现不可控 - 移动端 Safari 和 Chrome 80+ 完全不渲染
<marquee></marquee>，即使设了direction也无效果
替代方案：用 CSS @keyframes 模拟可控滚动方向
用 CSS 实现等效效果，能精确控制起点、终点、时长和方向，且兼容所有现代浏览器：
<div class="marquee">
<span>这是一段滚动文字</span>
</div>
<style>
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
- 改方向只需调换
translateX()的正负号：translateX(-100%) → translateX(100%)就变成右滚 - 垂直滚动用
translateY()，注意百分比基准是容器高度而非宽度 - 动画时长（
10s）越小，滚动越快；设成infinite才能循环，漏写会只跑一遍
JavaScript 动态切换滚动方向的坑
若需运行时改变方向（比如按钮点击切换），不要尝试修改 <marquee></marquee> 的 direction 属性 —— 多数浏览器不响应变更。正确做法是操作 CSS 动画：
- 给元素添加多个预定义动画类（如
.scroll-left、.scroll-up），用 JS 切换className - 直接修改
style.animationName时，必须同时重置animation其他属性（如时长），否则动画可能卡住 - 用
getComputedStyle(el).animationName读取当前动画名不可靠，应维护一个状态变量记录方向
真正需要兼容老旧内网系统才碰 <marquee></marquee>；其他情况，CSS 动画 + 状态管理更稳，而且 direction 这种属性名容易让人误以为支持数值或表达式，其实它只是个开关字符串。
