JavaScript新手求助：视口触发动画时出现classList未定义报错

核心错误原因 #

你代码里的entryString.target.classList.add('string-animation')是关键错误——entryString已经是通过entry.target.querySelector('.string')获取到的DOM元素，它本身没有.target属性，所以entryString.target会返回undefined，直接导致抛出"Cannot read properties of undefined (reading 'classList')"的报错。

修复步骤 #

1. 修正JavaScript代码中的DOM操作 #

把entryString.target.classList改成entryString.classList，同时建议增加entryString存在性判断，避免找不到元素时的额外报错：

(function () {
  var visualBlock = document.querySelector('.stage');

  const observer = new IntersectionObserver(entries => {    
    entries.forEach(entry => {
      var entryString = entry.target.querySelector('.string');
      // 先判断目标元素是否存在，防止后续操作报错
      if (!entryString) return;
      
      if (typeof getCurrentAnimationPreference === 'function' && !getCurrentAnimationPreference()) {
        return;
      }
      
      if (entry.isIntersecting) { 
        entryString.classList.add('string-animation');
        return;
      }
      entryString.classList.remove('string-animation');
    });
  });

  observer.observe(visualBlock);
})();

2. 修复HTML中的标签错误 #

你的HTML里脚本标签闭合错误，把</string>改成</script>，同时建议将脚本移到<body>标签的末尾（或者使用DOMContentLoaded监听），确保DOM完全加载后再执行脚本：

<div class="stage">
  <div class="running__string">
    <div class="string">
      <p>Text text text text text text text text text text text text text!</p>
    </div>
  </div>
</div>
<!-- 移到容器外部、body末尾，确保DOM加载完成 -->
<script src="string.js"></script>

3. 可选优化：调整IntersectionObserver触发时机 #

如果希望动画触发时机更灵活，可以给IntersectionObserver添加配置项，比如设置rootMargin让动画提前/延迟触发：

const observer = new IntersectionObserver(entries => {    
  // ... 原有逻辑
}, {
  rootMargin: '0px 0px -50px 0px', // 元素底部进入视口50px时触发
  threshold: 0.1
});

验证修复效果 #

完成以上修改后，当.stage容器进入视口时，.string元素会正确添加.string-animation类，滚动文字动画即可正常触发；离开视口时类会被移除，动画停止。

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