如何根据文本移动距离调整transition duration实现溢出文本hover匀速滚动

要实现所有文本滚动速度一致，核心逻辑是滚动时长 = 滚动距离 / 固定滚动速度，我们需要通过CSS自定义变量+少量JS配合动态计算每个文本的滚动时长： #

完整实现代码 #

CSS 部分

/* 外层容器 */
.scroll-container {
  width: 200px;
  height: 50px;
  overflow: hidden;
  font-family: sans-serif;
  margin-bottom: 10px;
  font-size: 18px;
  box-shadow: 15px 0px 0px #404040 inset, -15px 0px 0px #404040 inset;
}
/* 滚动文本元素 */
.scroll-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
  background: #404040;
  white-space: nowrap;
  line-height: 50px;
  color: #fff;
  padding: 0 15px;
  box-sizing: border-box;
  transform: translateX(0);
  /* 自定义变量存储滚动时长，默认0即不滚动 */
  --scroll-duration: 0s;
}
.scroll-container:hover .scroll-text {
  width: unset;
  overflow: unset;
  text-overflow: unset;
  /* 动态使用计算好的时长 */
  transition: transform var(--scroll-duration) linear;
  transform: translateX(calc(200px - 100%));
}

HTML 部分

<div class="scroll-container">
  <div class="scroll-text">Lorem ipsum dolor sit amet,</div>
</div>
<div class="scroll-container">
  <div class="scroll-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</div>
</div>
<div class="scroll-container">
  <div class="scroll-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</div>
</div>

JS 部分

// 固定滚动速度，单位：像素/秒，可根据需求调整
const SCROLL_SPEED = 30;
// 最小滚动时长，避免短距离滚动太突兀，可根据需求调整
const MIN_DURATION = 1;

document.querySelectorAll('.scroll-text').forEach(textEl => {
  // 临时取消宽度限制获取文本实际宽度
  textEl.style.width = 'unset';
  const textWidth = textEl.scrollWidth;
  // 复原宽度限制
  textEl.style.width = '100%';
  // 外层容器固定宽度200px，也可以动态获取textEl.parentElement.clientWidth适配可变容器
  const containerWidth = 200;
  // 计算需要滚动的距离
  const scrollDistance = textWidth - containerWidth;
  
  if (scrollDistance > 0) {
    // 计算滚动时长，取和最小时长的较大值
    const duration = Math.max(scrollDistance / SCROLL_SPEED, MIN_DURATION);
    textEl.style.setProperty('--scroll-duration', `${duration}s`);
  } else {
    // 文本未超出容器，不需要滚动
    textEl.style.setProperty('--scroll-duration', `0s`);
  }
});

方案说明 #

• 滚动速度通过SCROLL_SPEED参数控制，数值越大滚动越快，你可以根据实际需求调整
• 增加了MIN_DURATION参数避免短距离滚动过于突兀，不需要可以设为0
• 替换了原代码中泛用的div选择器，使用明确的类名避免样式冲突
• 如果容器宽度不是固定200px，可以把JS里的containerWidth替换为textEl.parentElement.clientWidth实现动态适配

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