滚动时仅单个元素触发动画，如何让所有目标元素都触发？

问题出在你只监听了第一个.lol元素，document.querySelector('.lol')只会返回匹配选择器的第一个DOM节点。要让所有.lol元素都触发动画，需要获取所有匹配的元素并逐个监听。

修改后的JavaScript代码 #

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const p = entry.target.querySelector('p');

    if (entry.isIntersecting) {
      p.classList.add('down');
      // 可选：如果希望动画只触发一次，添加下面这行
      // observer.unobserve(entry.target);
      return;
    }

    p.classList.remove('down');
  });
});

// 获取所有.lol元素并逐个监听
document.querySelectorAll('.lol').forEach(element => {
  observer.observe(element);
});

代码说明 #

• document.querySelectorAll('.lol')会返回页面中所有带.lol类的元素集合
• 通过forEach循环遍历集合，对每个元素调用observer.observe()，这样每个元素进入视口时都会触发回调逻辑
• 可选的unobserve调用可以让元素只触发一次动画，避免滚动反复触发

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