CSS文本往返滚动动画如何根据文本宽度设置translateX值

方案选型结论 #

优先选无JS纯CSS方案，适配所有文本长度无空白问题；如果业务要求不能复制重复文本节点，再用几行轻量JS做动态偏移计算即可，不需要复杂逻辑。

纯CSS实现方案（推荐，无JS依赖） #

你之前用固定translateX(-50%)导致滚动过远露出空白，核心是硬编码的偏移值没有和实际文本宽度绑定。用双文本拼接+相对自身宽度计算偏移的方式，可以完全适配任意长度的文本，不需要写死偏移值：

• 外层容器设置固定宽度、overflow: hidden做可视区域裁剪，强制文本不换行
• 内层滚动区用flex横向排列两份完全一致的文本，第二份文本加aria-hidden="true"避免读屏设备重复朗读
• 动画往返的终点偏移设为calc(-100% / 2)，这里的100%是相对于内层滚动区自身的总宽度，刚好等于单份文本的宽度，滚动到终点时第二份文本的位置和初始状态下第一份文本的位置完全重合，往回滚动时全程不会露出空白

核心代码示例：

<div class="marquee-container">
  <div class="marquee-content">
    <span class="marquee-text">需要滚动的完整文本内容，任意长度都可适配</span>
    <span class="marquee-text" aria-hidden="true">需要滚动的完整文本内容，任意长度都可适配</span>
  </div>
</div>

.marquee-container {
  width: 300px; /* 替换为业务实际需要的容器宽度 */
  overflow: hidden;
  white-space: nowrap;
}
.marquee-content {
  display: inline-flex;
  animation: bounce-scroll 6s linear infinite alternate;
}
.marquee-text {
  padding: 0 12px; /* 可选，控制两份文本的间距，避免首尾贴得太近 */
}
@keyframes bounce-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% / 2));
  }
}

该方案兼容所有现代浏览器，不需要监听resize事件，文本长度、容器尺寸变化时偏移量会自动适配，没有JS运行时开销。

轻量JS实现方案（单文本无重复节点场景用） #

如果业务要求DOM里不能出现重复的文本节点，纯CSS目前无法实现跨元素的宽度差值计算（没法同时拿到文本自身宽度和容器宽度算最大滚动距离），这时用少量JS动态计算偏移是最优解：

• 初始化和窗口尺寸变化时，分别获取容器可视宽度、文本实际渲染宽度
• 计算最大左偏移值：文本实际宽度 - 容器可视宽度，这个值刚好是文本左边缘贴到容器左边界、右边缘和容器右边缘对齐的位置，不会过移露出空白
• 把计算出的偏移值赋值给CSS自定义属性，动画直接读取该属性作为终点偏移值即可，文本短于容器时自动暂停动画不做无意义滚动

核心代码示例：

const scrollContainer = document.querySelector('.marquee-container')
const scrollText = document.querySelector('.marquee-text')

const updateScrollOffset = () => {
  const maxOffset = scrollText.offsetWidth - scrollContainer.offsetWidth
  if (maxOffset <= 0) {
    scrollContainer.style.setProperty('--scroll-max', '0px')
    scrollText.style.animationPlayState = 'paused'
    return
  }
  scrollContainer.style.setProperty('--scroll-max', `-${maxOffset}px`)
  scrollText.style.animationPlayState = 'running'
}

// 页面加载完成后初始化，监听窗口尺寸变化自动更新
window.addEventListener('load', updateScrollOffset)
window.addEventListener('resize', updateScrollOffset)

对应CSS动画部分直接调用CSS变量即可：

@keyframes bounce-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--scroll-max)); }
}

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