使用Intersection Observer实现视口动画本地运行不生效问题排查

你遇到的问题核心原因是JS代码执行时机不对：Stack Overflow的代码运行器默认会将提交的JS代码放在页面DOM完全加载完成后再执行，而你本地编写HTML时，大概率把JS代码放在了<head>标签内，或者放在了.box元素对应的HTML代码之前。此时JS执行到document.querySelectorAll('.box')时，页面上的目标元素还未渲染完成，无法选中元素，自然不会绑定监听、触发动画。

两种修复方案 #

• 方案1：调整JS代码位置，把所有JS逻辑放到HTML文件</body>结束标签的前面，保证所有DOM元素加载完成后再执行JS。
• 方案2：给现有JS代码外层包裹DOM加载完成的监听事件，修改后的代码如下：

document.addEventListener('DOMContentLoaded', () => {
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
  }

  const callback = (entries) => { 
    entries.forEach(entry => {
      if(entry.isIntersecting) {
        entry.target.classList.add('isVisible');
      } else {
        entry.target.classList.remove('isVisible');   
      }
    });
  }

  const observer = new IntersectionObserver(callback, options);
  document.querySelectorAll('.box').forEach(box => observer.observe(box));
})

排查验证方式 #

如果修改后仍不生效，打开Chrome开发者工具（按F12）切换到Console标签，首先查看是否有报错信息，其次输入document.querySelectorAll('.box')回车，确认是否能正常返回你定义的所有.box元素，即可快速定位问题。

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