locomotive scroll disable the scroll of my page

Question

When I put this function : const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true }); The scroll of my page not working and i can't scroll into the page, when I put this function in comment, the scroll is working again. I don't know why locomotive scroll disable the scroll in the page, so do you have any ideas ?

Answer 1

You need to define the section(s) in your data-scroll-container, otherwise it will not work. Your main div should have the data-scroll-container attribute, plus each section should have data-scroll-section attribute. Example:

<div class="container" data-scroll-container>
  <div class="section" data-scroll-section>
    <h2>Lorem</h2>
    <p>Ipsum</p>
  </div>
  <div class="section" data-scroll-section>
    <h2>Something else</h2>
    <p> Lorem Ipsum</p>
  </div>
  

There is a good example video I've found which provides a detailed application.

https://www.youtube.com/watch?v=u-ks1-dzKEw