0

I'm building a Woocommerce website and I would like to disable Locomotive Scroll on the Checkout page.

I tried this code, but it doesn't work. How could I disable Locomotive for a specific page? My website is not running with Ajax.

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    smoothMobile: true,
    getSpeed: true,
    getDirection: true
});


window.addEventListener("load", function() {
     if ($('.woocommerce-checkout').length) {
       scroll.stop();
       scroll.destroy();
     }
  });

Thanks!

Mathieu Préaud
  • 357
  • 3
  • 16

1 Answers1

1

You could prevent the initialization of Locomotive Scroll by declaring it within a function like this:

let scroll;
function initLocoScroll() {
    if (document.querySelector('.woocommerce-checkout')) return;
     scroll = new LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        smooth: true,
        smoothMobile: true,
        getSpeed: true,
        getDirection: true
    });


  }
    
initLocoScroll();

// if you are concerned that JavaScript will be unable to find the element
// because it is loaded before the DOM,
// you could replace the previous line with this one:

// window.addEventListener("load", initLocoScroll);

I don't think the '.length'-property is necessary. The jQuery (or querySelector) statement alone should be enough to determine if the element exists.

Another issue might be that the element you are trying to use to determine whether Locomotive Scroll should be active or not cannot be found. Be sure to check that if the error persists.

I hope this was helpful!

Daniel
  • 11
  • 3