上一篇
JS滚动字幕怎么做？实现网页文字自动滚动代码
滚动字幕（Marquee）是网页设计中用于展示新闻、公告或重要信息的常见交互元素，虽然 HTML 曾提供 <marquee> 标签，但该标签已被废弃，现代开发中推荐使用 CSS 动画或 JavaScript 来实现更灵活、性能更好且符合标准的滚动效果，以下将详细说明基于 JavaScript 和 CSS 实现滚动字幕的技术方案。
核心实现原理
JavaScript 实现滚动字幕的核心逻辑通常涉及以下几个步骤：获取 DOM 元素、计算元素尺寸、利用 requestAnimationFrame 或 setInterval 更新元素的 transform 或 left 属性,并在元素完全移出可视区域后重置位置以实现无缝循环。
基础结构搭建
在 HTML 中，我们需要一个容器（父元素）和一个内容块（子元素），容器负责设置溢出隐藏（overflow: hidden块负责承载文字。
CSS 样式配置
CSS 负责定义容器的外观和内容的初始状态，为了实现平滑滚动，通常建议使用 transform: translateX() 而不是改变 left 或 margin，因为前者能触发 GPU 加速,性能更优。
|
属性
| 值 | 说明 |
|---|---|---|
| .marquee-container | overflow: hidden; white-space: nowrap; | 隐藏溢出内容，防止换行 |
| .marquee-content | display: inline-block; | 块保持在一行内 |
| 动画关键帧 | @keyframes scroll | 定义从右向左或从左向右的移动轨迹 |
JavaScript 逻辑实现
使用 JavaScript 可以实现更智能的控制，例如鼠标悬停暂停、动态内容加载等，以下是一个基于 requestAnimationFrame 的无缝滚动示例代码结构。
class Marquee { constructor(element) { this.container = element; this.content = element.querySelector('.marquee-content'); this.speed = 1; // 滚动速度 this.isPaused = false; this.position = 0; this.init(); } init() { // 克隆内容以实现无缝衔接 const clone = this.content.cloneNode(true); this.content.parentNode.appendChild(clone); this.clonedContent = clone; // 绑定事件 this.container.addEventListener('mousee
nter', () => this.isPaused = true); this.container.addEventListener('mouseleave', () => this.isPaused = false); this.animate(); } animate() { if (!this.isPaused) { this.position -= this.speed; // 当第一个内容块完全移出屏幕时，重置位置 if (Math.abs(this.position) >= this.content.offsetWidth) { this.position = 0; } this.content.style.transform = `translateX(${this.position}px)`; this.clonedContent.style.transform = `translateX(${this.position}px)`; } requestAnimationFrame(() => this.animate()); } } // 初始化 const marqueeEl = document.querySelector('.marquee-container'); new Marquee(marqueeEl);
性能优化与注意事项
在实际项目中，直接操作 DOM 属性会导致重排（Reflow），影响页面性能,必须遵循以下最佳实践：
- 使用 transform 代替 top/left：transform 属性通常由合成线程处理，不会触发重排，能保持 60fps 的流畅度。
- 避免高频 DOM 查询：在 animate 函数中，不要反复查询 offsetWidth 等布局属性，应在 init 阶段缓存这些值。
- 处理动态内容：如果字幕内容是动态获取的（如 AJAX 请求）,需要在数据加载完成后重新计算容器宽度并重置滚动位置。
- 无障碍访问（Accessibility）：确保滚动字幕不会干扰屏幕阅读器，或者提供暂停/停止按钮,以便用户控制信息流。
常见问题与解答
问题 1：为什么我的滚动字幕在内容较短时会出现空白或跳动？
解答：
这通常是因为无缝滚动的逻辑判断条件不准确，当内容宽度小于容器宽度时，不需要滚动；当内容宽度大于容器宽度时，需要确保克隆的内容块紧随其后，如果计算 offsetWidth 时包含了 padding 或 border 但未在 CSS 中统一盒模型，会导致位置计算偏差，建议在使用 getBoundingClientRect() 或 offsetWidth 时，确保 CSS 中 box-sizing 设置为 border-box，并在初始化时精确计算内容总宽度，只有当 contentWidth > containerWidth 时才启动滚动逻辑。
问题 2：如何实现左右来回滚动的效果（即碰到边缘反弹）？
解答：
实现来回滚动需要改变运动方向的状态变量，在 animate 函数中，除了更新位置，还需要判断位置是否达到边界，如果位置小于 -contentWidth 或大于 0，则反转速度方向（this.speed = -this.speed），需要确保克隆块的位置与主块保持同步，通常通过计算两个块之间的相对距离来实现，具体逻辑是：当主块完全移出左侧时，克隆块刚好进入右侧可视区域，此时重置主块位置并继续移动,形成往复运动。
