marquee 的 behavior="alternate" 无效是因为现代浏览器已废弃该标签，应改用 CSS animation 实现来回滚动：父容器 overflow: hidden、子元素 white-space: nowrap、animation-direction: alternate 配合 translateX(-100%)。
marquee 的 behavior="alternate" 为什么没效果？
直接写 <marquee behavior="alternate">文字</marquee> 却发现还是单向滚动，甚至完全不滚动——大概率是浏览器已禁用或忽略 <marquee> 标签。Chrome、Firefox、Edge 等现代浏览器默认不支持该标签，它早在 HTML5 中就被正式废弃，仅在 IE 或极老内核中能运行。
用 CSS animation 替代 marquee behavior="alternate"
要用纯 CSS 实现“来回往复滑动”，核心是定义一个左右平移的动画，并设置 animation-direction: alternate 和 animation-iteration-count: infinite。关键点不是“模仿 marquee”，而是控制元素在容器内的位移范围与时机：
- 父容器需设
overflow: hidden，否则滑出部分会显示 - 动画元素需设
white-space: nowrap防止换行打断滑动 - 位移值推荐用
100%而非固定像素，适配不同宽度容器 - 动画时长（
animation-duration）建议 ≥ 3s，太快易引发视觉疲劳
示例片段：
<div class="marquee-wrap">
<div class="marquee-content">这是一段来回滚动的文字</div>
</div>
<style>
.marquee-wrap {
overflow: hidden;
width: 300px;
}
.marquee-content {
white-space: nowrap;
animation: scrollLeftRight 6s infinite alternate ease-in-out;
}
@keyframes scrollLeftRight {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
behavior="alternate" 在 JS 中模拟的边界问题
如果必须用 JavaScript 动态控制（比如内容长度不确定、需响应式重算），别硬套 marquee 属性逻辑。容易踩的坑包括：
- 用
scrollLeft+ 定时器模拟时，未监听容器尺寸变化，导致位移终点错乱 - 切换方向时未清空上一帧定时器，造成多个
requestAnimationFrame冲突 - 文本内容含 emoji 或宽字符（如中文+符号混排），
offsetWidth计算不准，位移距离不足或溢出
更稳妥的做法：用 getBoundingClientRect() 获取实际渲染宽度，结合 transform: translateX() 做 CSS 驱动动画，避免 layout thrashing。
兼容性与可访问性提醒
即使动画跑起来了，也要注意两点：
- 用户开启系统“减少运动”偏好（
@media (prefers-reduced-motion)）时，应停用动画，否则可能引发眩晕 - 屏幕阅读器通常跳过
marquee和自动滚动区域，若内容重要（如公告、提示），必须额外提供静态副本或 ARIA-live 区域
真正难的不是让文字动起来，而是让动得合理、停得及时、看得清楚。
