在HTML4时代，开发者常使用marquee标签快速实现文字或元素的滚动效果，这个标签使用简单，不需要额外编写样式或脚本就能完成基础的滚动功能。不过随着HTML5规范的制定，marquee标签的命运发生了很大变化。
marquee标签在HTML5中的状态
marquee标签从未被纳入W3C的正式HTML规范，它最初是微软IE浏览器的私有扩展，后来被其他浏览器兼容实现，属于事实标准而非官方标准。在HTML5规范制定时，由于该标签的滚动行为难以通过CSS控制，可访问性差，且容易导致页面性能问题，因此被正式废弃，不再推荐在HTML5文档中使用。
现在主流浏览器虽然还能解析marquee标签，但已经不再为其提供规范支持，未来可能会完全移除对该标签的兼容，因此在新的HTML5项目中不建议继续使用marquee标签实现滚动效果。
HTML5中实现滚动文字的替代方案
方案一：使用CSS动画实现滚动
CSS动画是目前最推荐的滚动文字实现方式，兼容性稳定，性能表现好，还能灵活控制滚动速度、方向、循环方式等参数。核心思路是通过@keyframes定义位移动画，再给文字元素添加动画属性。
/* 定义从左到右的滚动动画 */
@keyframes scroll-left {
0% {
transform: translateX(100%); /* 元素初始位置在容器右侧外部 */
}
100% {
transform: translateX(-100%); /* 元素最终移动到容器左侧外部 */
}
}
/* 滚动文字容器样式 */
.scroll-container {
width: 100%; /* 容器宽度占满父元素 */
overflow: hidden; /* 隐藏超出容器的内容 */
white-space: nowrap; /* 文字不换行 */
background-color: #f5f5f5;
padding: 10px 0;
}
/* 滚动文字本身样式 */
.scroll-text {
display: inline-block;
animation: scroll-left 10s linear infinite; /* 应用动画，10秒完成一次滚动，线性匀速，无限循环 */
}
/* 鼠标悬停时暂停滚动 */
.scroll-text:hover {
animation-play-state: paused;
}
对应的HTML结构如下：
<div class="scroll-container"> <span class="scroll-text">这是使用CSS动画实现的滚动文字效果，支持自定义速度和方向</span> </div>
方案二：使用JavaScript控制位移
如果需要更复杂的滚动逻辑，比如滚动到边界后触发回调，或者动态修改滚动内容，可以使用JavaScript控制元素的位移来实现。
// 获取滚动容器和文字元素
const container = document.querySelector('.js-scroll-container');
const text = document.querySelector('.js-scroll-text');
let position = container.offsetWidth; // 初始位置为容器宽度，即文字在容器右侧外部
const speed = 1; // 每次移动的像素数，数值越大速度越快
function scrollText() {
// 更新文字的left位置
position -= speed;
text.style.left = position + 'px';
// 当文字完全移出容器左侧时，重置位置到容器右侧
if (position < -text.offsetWidth) {
position = container.offsetWidth;
}
// 请求下一帧动画
requestAnimationFrame(scrollText);
}
// 启动滚动
scrollText();
对应的HTML和CSS结构：
<div class="js-scroll-container"> <span class="js-scroll-text">这是使用JavaScript实现的滚动文字，可自定义滚动逻辑</span> </div>
.js-scroll-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative; /* 作为文字元素的定位父容器 */
background-color: #e8f4fd;
padding: 10px 0;
}
.js-scroll-text {
position: absolute;
top: 10px;
left: 0;
white-space: nowrap;
}
两种方案对比
| 实现方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| CSS动画 | 性能优、代码简洁、兼容性好、无需JS逻辑 | 复杂交互逻辑实现难度高 | 基础滚动文字需求，无复杂交互 |
| JavaScript控制 | 逻辑灵活，可自定义滚动规则、触发回调 | 需要编写JS代码，性能略低于CSS动画 | 需要动态调整滚动行为、复杂交互的场景 |
注意事项
- 滚动文字效果不要过度使用，避免干扰用户正常阅读页面内容
- 如果滚动内容包含重要信息，建议提供暂停滚动的交互，比如鼠标悬停暂停，方便用户查看
- 移动端页面使用滚动效果时，要考虑触摸操作的影响，避免和页面滑动冲突
- 废弃的marquee标签不要在新的HTML5项目中使用，避免后续浏览器兼容问题