Barba.js与Locomotive-scroll兼容性问题：页面切换后滚动插件失效求助

你遇到的问题核心在于Barba的单页导航特性和Locomotive Scroll的初始化逻辑冲突了——Barba跳转时不会刷新整个页面，你当前的写法每次进入about-section都会重复插入脚本，而且没有正确销毁旧的滚动实例，导致二次进入时触发报错。下面是针对性的修复方案：

核心问题拆解 #

• 重复加载脚本：每次进入About页都创建新的脚本标签，会导致locomotive-scroll.js被多次加载，引发变量重复定义或逻辑冲突
• 未清理旧实例：Locomotive Scroll初始化后会绑定DOM事件和监听，Barba跳转离开时如果不销毁实例，再次进入时新实例会和旧实例的监听逻辑相互干扰

修复后的代码实现 #

$(function () {
  // 全局存储Locomotive Scroll实例，方便后续销毁
  let locomotiveScrollInstance = null;
  // 标记脚本是否已加载完成，避免重复插入
  let isLocomotiveScriptLoaded = false;

  // 封装脚本加载函数，确保只加载一次
  function loadLocomotiveScript() {
    return new Promise((resolve) => {
      if (isLocomotiveScriptLoaded) {
        resolve();
        return;
      }
      let script = document.createElement('script');
      script.src = 'http://127.0.0.1:5000/locomotive-scroll.js';
      script.onload = () => {
        isLocomotiveScriptLoaded = true;
        resolve();
      };
      document.body.appendChild(script);
    });
  }

  barba.init({
    sync: true,
    cacheIgnore: false,
    transitions: [
      {
        async leave(data) {
          const done = this.async();
          pageTransition();
          // 离开页面时销毁Scroll实例，清理残留监听
          if (locomotiveScrollInstance) {
            locomotiveScrollInstance.destroy();
            locomotiveScrollInstance = null;
          }
          await delay(1000);
          done();
        },
        async enter(data) {
          contentAnimation();
        },
        async once(data) {
          contentAnimation();
          // 处理初始加载就是About页的情况
          if (data.next.namespace === 'about-section') {
            await loadLocomotiveScript();
            initLocomotiveScroll(data.next.container);
          }
        },
      },
    ],
    views: [{
      namespace: 'about-section',
      async beforeEnter({ next }) {
        // 先确保脚本加载完成，再初始化Scroll
        await loadLocomotiveScript();
        initLocomotiveScroll(next.container);
      }
    }]
  });

  // 封装Locomotive Scroll初始化逻辑
  function initLocomotiveScroll(container) {
    locomotiveScrollInstance = new LocomotiveScroll({
      el: container.querySelector('[data-scroll-container]'), // 替换为你的滚动容器选择器
      smooth: true,
      // 这里可以添加你的其他自定义配置
    });
  }
});

关键优化说明 #

• 脚本按需加载且仅加载一次：通过isLocomotiveScriptLoaded标记避免重复插入脚本，用Promise确保脚本加载完成后再执行初始化
• 实例生命周期管理：在Barba的leave钩子中销毁旧的Scroll实例，彻底清理绑定的事件和DOM监听
• 全场景初始化覆盖：在once钩子处理初始加载为About页的情况，在beforeEnter处理跳转进入的情况，确保所有场景都能正确初始化

另外需要注意：

• 确保你的About页有符合要求的滚动容器（比如带有data-scroll-container属性的元素），和Locomotive Scroll的初始化规则匹配
• 如果使用了Locomotive Scroll的专属样式（比如带data-scroll属性的元素），不需要额外重置，Barba跳转后这些属性会被新页面的元素继承

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