时间戳

首页 > 解决方案 > Barba.js 和 locomotive-scroll 不兼容？

barbajs - Barba.js 和 locomotive-scroll 不兼容？

问题描述

我已经尝试过 barba.js 和 locomotive-scroll 工作（我也尝试过 scrollmagic），但我没有让它正常工作。如果我将 locomotive-scroll 放在 about 页面上并重新加载浏览器，它可以工作，但如果我从那里转到主页并返回 about 页面，它会给我一个错误并停止工作。与其他脚本没有问题，这就是为什么我认为一定有一些不兼容的原因。我尝试了很多方法，但它们都给了我一个错误。最后一个是：

$(function () {
  barba.init({
   sync: true,
   cacheIgnore: false,
   transitions: [
    {
     async leave(data) {
      const done = this.async();
      pageTransition();
      await delay(1000);
      done();
     },

     async enter(data) {
      contentAnimation();
     },

     async once(data) {
      contentAnimation();
     },
    },
   ],
   views: [{
    namespace: 'about-section',
    beforeEnter({ next }) {
      let script = document.createElement('script');
      script.src = 'http://127.0.0.1:5000/locomotive-scroll.js';
      next.container.appendChild(script);
    }
   }]

 });
});

标签： barbajslocomotive-scroll

解决方案

有点晚了，但请添加一个示例，以便我们调试它。

根据我的猜测，如果您多次添加相同的脚本 -> locomotive-scroll.js，可能是这样。

它也可能来自 async/await 语法。我有一个类似的问题并删除它，解决了它。

barba.init({
   sync: true,
   cacheIgnore: false,
   transitions: [
    {
     leave(data) {
      pageTransition();
     },

     enter(data) {
      contentAnimation();
     },

     once(data) {
      contentAnimation();
     },
    },
   ],
   views: [{
    namespace: 'about-section',
    beforeEnter({ next }) {
      let script = document.createElement('script');
      script.src = 'http://127.0.0.1:5000/locomotive-scroll.js';
      script.setAttribute('id', 'loco-scroll-id');
      next.container.appendChild(script);
    },
    beforeLeave({current}) {
      current.container.querySelector('loco-scroll-id').remove();
    }
   }]
 });

另外，还有一个问题，是故意只在about页面中使用机车卷轴吗？如果没有，您可以简单地将它添加到 barba-container 之外，这样每次更改链接时它都不会重新加载它。

推荐阅读