Locomotive Scroll: Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')

The error message 'Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')' indicates an issue with the querySelectorAll method being called on a null value. In this specific case, it appears that document.querySelector('.scrollContainer') is returning null, meaning it couldn't find an element with the class name 'scrollContainer' in your HTML document.

To fix this, ensure an element with the class name 'scrollContainer' exists in your HTML code. Verify the spelling and confirm the class name is correctly applied to the intended element.

If the class name is accurate and the element exists, you might need to wrap your code inside a document ready function to guarantee the DOM has fully loaded before attempting to access the element. Here's an example:

document.addEventListener('DOMContentLoaded', function() {
  let options = {
    el: document.querySelector('.scrollContainer'),
    smooth: true,
    getSpeed: true,
    getDirection: true,
    reloadOnContextChange: true,
    //lerp : 0.05,
  }

  scrollQ = new LocomotiveScroll(options);
});

By wrapping the code within the DOMContentLoaded event listener, you ensure the code executes only after the DOM is completely loaded.