Can't scroll down using Barba.js and Locomotive scroll

Question

I'm using barba.js and locomotive scroll together, I have overlay transition which work when I click the menu link (page2) to go to another page, but once that is down I cant scroll down when, I added the below code

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

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

I am still getting the same result, kindly help fix this

<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>

Full script below

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

Thanks

score 1 · Answer 1 · answered Aug 18 '20 at 09:22

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

});

score 0 · Answer 2 · answered Aug 07 '20 at 11:13

Try to update locomotive instance. On barba enter use scroll.update() and do not destroy the instance.

Also, you can try to remove async syntax.

Have you tried to have barba-container wrapped with locomotive scroll and change HTML inside locomotive? That way you can only update the instance after the new content is added.

You can use scroll.scrollTo(0) (instead of window) to scroll the locomotive scroll to the top in leave method, so when the next page enters, the scroll will be reset.

Can't scroll down using Barba.js and Locomotive scroll

2 Answers2