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

Question

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

2.3k Views Asked by dotun seyi At 04 April 2025 at 21:54

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

Original Q&A

There are 2 best solutions below

**Rado** · Answer 1

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.

**Dpk** · Answer 2

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

});

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in SMOOTH-SCROLLING

Related Questions in LOCOMOTIVEJS

Related Questions in BARBAJS

Trending Questions

Popular # Hahtags

Popular Questions