使用GSAP实现水平滚动文本时，.Width()与clientWidth获取宽度异常

我之前也碰到过一模一样的坑！核心问题很明确：你在动态加载的文本还没完全渲染到DOM中的时候就去获取div的宽度了——浏览器这时候还没来得及完成文本布局和尺寸计算，返回的自然是错误或者不完整的数值，这就是为什么刷新有时候对、有时候错，等一秒就正常的原因。

下面给你几个靠谱的解决方案，按推荐程度排序：

1. 确保文本加载完成后再计算宽度 #

这是最根本的解决方式，只有当文本完全插入DOM后，浏览器才能算出准确的元素宽度。

如果是用fetch加载txt文件，直接把尺寸计算和GSAP初始化放在加载完成的回调里：

fetch('your-content.txt')
  .then(res => res.text())
  .then(text => {
    const textContainer = document.querySelector('#your-text-div');
    // 先把文本插入DOM
    textContainer.textContent = text;
    // 这里再获取宽度，绝对准确
    const fullWidth = textContainer.clientWidth;
    // 启动GSAP滚动动画
    gsap.to(textContainer, {
      x: -fullWidth,
      duration: 12,
      repeat: -1,
      ease: "none",
      paused: false
    });
  });

如果是用其他方式加载文本（比如第三方库、后端渲染插入），一定要找到内容插入完成的钩子函数，在那之后再执行尺寸计算。

2. 等待浏览器重绘完成再计算 #

有时候即使文本已经插入DOM，浏览器还需要一点时间完成重绘，这时候可以用requestAnimationFrame或者GSAP的ticker来等下一帧：

// 假设你已经把文本插入了textContainer
const textContainer = document.querySelector('#your-text-div');
// 等浏览器完成当前帧的渲染
requestAnimationFrame(() => {
  const accurateWidth = textContainer.clientWidth;
  // 这里启动GSAP动画就没问题了
});

// 或者用GSAP自带的ticker，更贴合GSAP的生态
gsap.ticker.add(() => {
  const currentWidth = textContainer.clientWidth;
  // 确保宽度已经正确计算（避免初始的0值）
  if (currentWidth > 0) {
    // 只执行一次，移除监听
    gsap.ticker.remove(arguments.callee);
    // 初始化动画
    gsap.to(textContainer, {x: -currentWidth, duration: 10, repeat: -1, ease: "none"});
  }
});

3. 用MutationObserver监听DOM变化 #

如果不确定文本什么时候会被插入DOM（比如异步加载的时机不可控），可以用MutationObserver来监听容器的内容变化，当内容更新后自动计算宽度：

const textContainer = document.querySelector('#your-text-div');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 监听文本内容或子元素的变化
    if (mutation.type === 'childList' || mutation.type === 'characterData') {
      // 等浏览器重绘
      requestAnimationFrame(() => {
        const fullWidth = textContainer.clientWidth;
        // 启动动画
        gsap.to(textContainer, {x: -fullWidth, duration: 10, repeat: -1, ease: "none"});
        // 只需要监听一次的话，断开观察者
        observer.disconnect();
      });
    }
  });
});

// 开始监听容器的内容变化
observer.observe(textContainer, {
  childList: true,
  subtree: true,
  characterData: true
});

额外注意点 #

• 一定要给文本容器设置white-space: nowrap;的CSS样式！如果文本自动换行，你获取的宽度会是容器的宽度，而不是文本的总长度，这会直接导致滚动效果失效。
• 不要依赖页面刷新的“偶然正确”——刷新时浏览器的缓存、渲染顺序都是不可控的，必须用程序化的方式确保时机正确。

内容的提问来源于stack exchange，提问作者Nacho Lázaro Selva