1

我一起使用 barba.js 和机车滚动，当我单击菜单链接（page2）转到另一个页面时，我有覆盖转换，但是一旦它向下滚动，我就无法向下滚动，我添加了下面的代码

barba.hooks.beforeLeave((data) => {
    scroll.destroy();
});

barba.hooks.after((data) => {
    scroll.init();
});

我仍然得到相同的结果，请帮助解决这个问题

<body data-barba="wrapper">
    <div class="overlayCover"></div>
    <ul>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    </ul>

<main data-barba="container" data-barba-namespace="page1">
<div class="o-scroll">
<div data-scroll-container>

content here ....

</div>
</div>
</div>
</body>

完整脚本如下

const scroll = new locomotiveScroll({
        el: document.querySelector('.o-scroll'),
        smooth: true
});

barba.hooks.enter(() => {
    window.scrollTo(0, 0);
});

barba.hooks.beforeLeave((data) => {
    scroll.destroy();
});

barba.hooks.after((data) => {
    scroll.init();
});

barba.init({
  sync: true,
  transitions: [{
      async leave(data) {
          const done = this.async();

          pageTransition();
          await delay(1500);
          done();
      },

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

      async once(data) {
        contentAnimation();
      }       
  }]
});

谢谢

4

2 回答 2

1 
Here is some Quick Fix :


    function pageTransition() {
    // Your Animations

}


    function smooth(scrollContainer) {
    
      let currentScrollContainer = scrollContainer.querySelector('[data-scroll-container]')
      scroll = new LocomotiveScroll({
        el: currentScrollContainer,
        smooth: true
      });
    
    
    
      setTimeout(() => {
        scroll.update();
      }, 5000);
    
    }




let scroll;

barba.init({
  schema: {
    prefix: 'data-dpk',
  },


  

  transitions: [{
    name: 'dpk-transition',

    once({ next }) {
      pageTransition();
      smooth(next.container);
    },
    beforeEnter({ next }) {
      scroll.destroy();
      smooth(next.container);
    },
    leave({ next }) {
      pageTransition();
    },
  }]

});
于 2020-08-18T09:22:33.740 回答
0

尝试更新机车实例。在 barba 上输入使用 scroll.update() 并且不要破坏实例。

此外，您可以尝试删除异步语法。

您是否尝试过用机车滚动包裹 barba-container 并更改机车内部的 HTML？这样，您只能在添加新内容后更新实例。

可以在leave方法中使用scroll.scrollTo(0)（而不是window）将机车滚动条滚动到顶部，这样进入下一页时，滚动条会被重置。

于 2020-08-07T11:13:16.897 回答