使用ScrollMagic实现Parallax效果：多页面无法复用问题求助

常见问题根源 #

• 重复创建ScrollMagic控制器，导致场景冲突或资源浪费
• 类名替换不完整，选择器误匹配其他页面元素
• DOM未完全加载就执行初始化，元素获取失败
• 页面切换时未清理旧场景，引发内存泄漏

解决步骤 #

1. 封装可复用初始化函数：将视差逻辑抽离为通用函数，通过参数指定当前页面的目标元素选择器
2. 复用全局控制器：避免每个页面重复创建控制器，减少资源占用
3. 绑定DOM就绪事件：确保元素加载完成后再初始化视差
4. 页面切换时清理场景：销毁旧控制器和场景，防止残留影响新页面

代码结构示例 #

HTML结构（不同页面示例） #

<!-- 页面A -->
<section class="parallax-section page-a">
  <div class="parallax-bg" style="background-image: url('page-a-bg.jpg')"></div>
  <div class="content-wrap">
    <h2>页面A标题</h2>
    <p>页面A的内容区域</p>
  </div>
</section>

<!-- 页面B -->
<section class="parallax-section page-b">
  <div class="parallax-bg" style="background-image: url('page-b-bg.jpg')"></div>
  <div class="content-wrap">
    <h2>页面B标题</h2>
    <p>页面B的内容区域</p>
  </div>
</section>

JavaScript封装代码 #

// 通用视差初始化函数
function initParallax(targetSection, bgElement) {
  // 检查目标元素是否存在，避免无效执行
  const sections = document.querySelectorAll(targetSection);
  if (!sections.length) return;

  // 复用全局控制器，无需重复创建
  let scrollController = window.scrollMagicGlobalController;
  if (!scrollController) {
    scrollController = new ScrollMagic.Controller();
    window.scrollMagicGlobalController = scrollController;
  }

  // 为每个目标区域创建视差场景
  sections.forEach(section => {
    const bg = section.querySelector(bgElement);
    if (!bg) return;

    // 配置视差动画
    const parallaxTween = TweenMax.to(bg, 1, {
      y: '60%', // 视差移动距离，可根据需求调整
      ease: Linear.easeNone
    });

    // 创建ScrollMagic场景
    new ScrollMagic.Scene({
      triggerElement: section,
      triggerHook: 1,
      duration: '120%' // 场景持续滚动距离
    })
    .setTween(parallaxTween)
    // .addIndicators() // 调试用，上线可删除
    .addTo(scrollController);
  });
}

// 页面A初始化（在页面A的脚本中执行）
document.addEventListener('DOMContentLoaded', () => {
  initParallax('.page-a', '.parallax-bg');
});

// 页面B初始化（在页面B的脚本中执行）
document.addEventListener('DOMContentLoaded', () => {
  initParallax('.page-b', '.parallax-bg');
});

// 页面切换/卸载时清理场景（可选，多页跳转或单页应用路由切换时调用）
function clearParallaxScenes() {
  if (window.scrollMagicGlobalController) {
    window.scrollMagicGlobalController.destroy(true);
    window.scrollMagicGlobalController = null;
  }
}

// 监听页面卸载事件
window.addEventListener('beforeunload', clearParallaxScenes);

额外注意事项 #

• 确保所有页面引入的ScrollMagic、GSAP（或TweenLite/TweenMax）版本一致
• 视差参数（移动距离、持续时长）可作为函数参数传入，进一步提升复用性
• 动态加载的页面元素，需在元素渲染完成后手动调用initParallax

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