基于offsetWidth计算transition时长 实现不随文本长度变化的匀速跑马灯效果

原有实现的问题根源：将过渡时长和移动距离解耦，无论文本长短、总滚动路径多少，都绑定固定5s的动画时长，本质是把“速度恒定”变成了“时间固定”，自然会出现短文本过慢、长文本过快的问题。

核心实现思路 #

恒定滚动速度的本质是滚动速度 = 总移动距离 / 滚动时长，只要保证每段内容的“移动距离/时长”比值固定，就能实现无论文本长短，滑动速度完全一致的效果，完全替代原有的固定时长、逐帧移动的实现。
相比原有修改left属性的方案，优先使用transform: translateX()实现位置偏移。这类属性的变化不会触发布局重排，由GPU负责合成渲染，性能开销比修改left属性低70%以上，天然匹配webapp的性能优化需求。

具体实现代码 #

基础CSS配置 #

.text-scroller-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* 裁切超出容器的滚动内容 */
  height: 2rem; /* 根据实际设计调整高度 */
}
.message {
  position: absolute;
  top: 0;
  white-space: nowrap; /* 禁止文本换行，保证能获取文本真实宽度 */
  display: inline-block;
  /* 用CSS变量存储动态计算的滚动时长，JS直接修改变量值即可 */
  transition: transform linear var(--scroll-duration, 0s);
}

JS动态计算逻辑 #

• 先定义固定的目标滚动速度，单位为px/s，可根据实际设计需求调整，数值越大滚动越快
• 每次文本内容更新时，重新测量容器、文本元素的实际尺寸，计算对应滚动时长
• 避免初始位置的动画闪烁，先将文本瞬移到初始位置，再触发带动态时长的过渡动画

// 固定滚动速度，单位px/s
const FIXED_SCROLL_SPEED = 120;
const scrollerContainer = document.querySelector('.text-scroller-container');
const messageEl = document.querySelector('.message');
// 文本更新后调用该方法重新启动滚动
function startScroll(newMessage) {
  // 更新文本内容
  messageEl.textContent = newMessage;
  // 第一帧：重置过渡时长，将文本瞬移到容器右侧外的初始位置
  messageEl.style.setProperty('--scroll-duration', '0s');
  messageEl.style.transform = `translateX(${scrollerContainer.offsetWidth}px)`;
  // 第二帧：等待DOM渲染完成后，计算参数并触发滚动动画
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      // 计算文本从右侧外到左侧外的总移动距离
      const totalMoveDistance = scrollerContainer.offsetWidth + messageEl.offsetWidth;
      // 根据固定速度计算需要的滚动时长（单位：秒）
      const scrollDuration = totalMoveDistance / FIXED_SCROLL_SPEED;
      // 赋值动态计算的时长
      messageEl.style.setProperty('--scroll-duration', `${scrollDuration}s`);
      // 设置最终位置：文本完全滚动到容器左侧外
      messageEl.style.transform = `translateX(${-messageEl.offsetWidth}px)`;
    })
  })
}

常见踩坑点 #

• 必须给.message元素加white-space: nowrap，否则文本会自动换行，测量到的offsetWidth会被限制为容器宽度，导致时长计算完全失真
• 过渡函数必须使用linear线性缓动，不要用ease、ease-in-out这类带速度变化的缓动效果，否则无法实现恒定滚动速度
• 必须使用双requestAnimationFrame等待DOM渲染完成后再测量元素宽度，否则可能读到未更新的文本宽度，出现滚动速度不对的问题
• 如果需要实现循环滚动，只需监听transitionend事件，在动画结束后将文本瞬移回初始位置，重复上述触发逻辑即可，不需要额外的逐帧JS计算

内容的提问来源于stack exchange，提问作者syn