Javascript Can'；t使用Barba.js和机车滚动向下滚动_Javascript_Smooth Scrolling_Locomotivejs_Barbajs

Javascript Can'；t使用Barba.js和机车滚动向下滚动

javascript

Javascript Can'；t使用Barba.js和机车滚动向下滚动,javascript,smooth-scrolling,locomotivejs,barbajs,Javascript,Smooth Scrolling,Locomotivejs,Barbajs,我正在使用barba.js和机车滚动在一起，我有重叠过渡工作时，我点击菜单链接（第2页）转到另一个页面，但一旦这是我不能向下滚动时，我添加了以下代码 barba.hooks.beforeLeave((data) => { scroll.destroy(); }); barba.hooks.after((data) => { scroll.init(); }); 我仍然得到同样的结果，请帮助解决这个问题 <body data-barba="wrapp

我正在使用barba.js和机车滚动在一起，我有重叠过渡工作时，我点击菜单链接（第2页）转到另一个页面，但一旦这是我不能向下滚动时，我添加了以下代码

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>

谢谢

尝试更新机车实例。在BABA上输入use scroll.update（），不要销毁实例

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

你有没有试过用机车卷轴包装barba容器，并在机车内更改HTML？这样，您只能在添加新内容后更新实例

您可以使用scroll.scrollTo（0）（而不是window）将机车滚动到leave方法中的顶部，因此当进入下一页时，滚动将被重置

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();
    },
  }]

});

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();
    },
  }]

});