JavaScript实现溢出文本无限左右滚动及scrollWidth返回0问题求解

你遇到的scrollWidth返回0的核心原因是选择器不匹配：你JS代码中查询的.chart_movement类在你提供的HTML、CSS代码中均不存在，查询到的是无效空元素，读取属性自然返回0。

除此之外还有多处逻辑需要调整才能实现预期效果，完整修正方案如下：

1. 修正后的CSS代码 #

/* 外层容器 */
.chartTitleGuide {
  width: 185px;
  position: relative; /* 作为文本的定位父级 */
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
}
/* 滚动文本元素 */
.chart_movement_text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  letter-spacing: 0.5px;
}

2. 修正后的JS代码 #

// 等待DOM完全渲染完成后再执行，避免拿不到元素尺寸
$(function() {
  // 遍历每个标题容器单独判断，适配多实例场景
  $(".chartTitleGuide").each(function() {
    const $container = $(this);
    const $text = $container.find(".chart_movement_text");
    const containerWidth = $container.width();
    const textWidth = $text[0].scrollWidth;
    // 只有文本宽度大于容器宽度时才启动滚动
    if (textWidth > containerWidth) {
      const offset = textWidth - containerWidth + 10; // 额外加10px留白避免贴边
      function startScroll() {
        $text
          .animate({ left: -offset }, 5000)
          .delay(1200)
          .animate({ left: 0 }, 5000)
          .delay(1200, startScroll); // 循环调用实现无限滚动
      }
      startScroll();
    }
  })
})

调整说明 #

• 容器的position改为relative作为文本的定位父级，给文本加absolute定位才能触发left属性动画
• 滚动距离根据文本实际超出宽度动态计算，不用写死固定值，适配不同长度的文本
• 逻辑放在DOM加载完成的回调中，避免元素还没渲染就读取尺寸导致拿到错误值
• 遍历每个容器单独做判断，避免多个标题实例互相影响

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