如何将Intersection Observer与Parallax视差滚动结合使用？

原代码核心问题 #

• 全局scroll事件绑定后，会无条件遍历所有.parallaxBg元素更新位置，不管元素是否在视口内，既不符合需求也浪费性能
• Intersection Observer回调逻辑为空，entry.target.parallaxFunction既没有提前挂载到元素实例上，也没有加括号执行，完全没有实际作用
• 没有维护「当前处于视口内的视差元素」集合，scroll事件触发后无法定向更新可见元素

修正后完整实现 #

// 维护当前在视口内的视差元素集合
const activeParallaxElements = new Set();

// 全局scroll事件仅更新视口内的元素
window.addEventListener("scroll", function parallaxFunction() {
    const distance = window.pageYOffset;
    // 仅遍历可见的元素更新位置
    activeParallaxElements.forEach(parallaxBg => {
        parallaxBg.style.top = `${distance * -0.2}px`;
    })
});

// Intersection Observer 监听元素可见性
const bgImages = document.querySelectorAll('.parallaxBg');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口，加入活跃集合
      activeParallaxElements.add(entry.target);
    } else {
      // 元素离开视口，从活跃集合移除
      activeParallaxElements.delete(entry.target);
    }
  });
}, {
  // 可选配置：提前100px触发可见性判断，避免进入视口瞬间没有视差效果
  rootMargin: '100px 0px 100px 0px'
});

// 注册所有视差元素的监听
bgImages.forEach(image => {
  observer.observe(image);
});

实现逻辑说明 #

• 用Set结构维护视口内的活跃视差元素，scroll事件触发后只更新这部分元素，解决了所有元素同时触发的问题
• 用entry.isIntersecting判断元素可见性，比intersectionRatio > 0语义更清晰
• 可选的rootMargin配置可以根据实际需求调整，让元素还没完全进入视口就提前启动视差效果，避免视觉断层

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