0

I am trying to get the scroll position by using Locomotive Scroll. So far, I could only console.log the value by using:

locoScroll.on("scroll", ({ scroll }) => {
  var scrollY = scroll.y
  console.log(scrollY);
});

This code is inside a custom hook useLocoScroll that is being imported in a funtional component

import useLocoScroll from "../hooks/useLocoScroll";


const Home = () => {


  useLocoScroll(!preloader);


  return (
    <>
    ...app
    </>
  );
};

The complete useLocoScroll function.

export default function useLocoScroll(start) {
  
  useEffect(() => {
    
    if (!start) return;
    let locoScroll = null;

    const scrollEl = document.querySelector("#main-container");

    locoScroll = new LocomotiveScroll({
      el: scrollEl,
      smooth: true,
      smartphone: {
        smooth: true,
      },
      multiplier: 1,
      class: "is-reveal",
    });

    locoScroll.on("scroll", ({ scroll }) => {
        var scrolly = scroll.y
        console.log(scrolly);
  
        ScrollTrigger.update();
      });

    ScrollTrigger.scrollerProxy(scrollEl, {
      scrollTop(value) {
        if (locoScroll) {
          return arguments.length
            ? locoScroll.scrollTo(value, 0, 0)
            : locoScroll.scroll.instance.scroll.y;
        }
        return null;
      },
      scrollLeft(value) {
        if (locoScroll) {
          return arguments.length
            ? locoScroll.scrollTo(value, 0, 0)
            : locoScroll.scroll.instance.scroll.x;
        }
        return null;
      },
    });

    const lsUpdate = () => {
      if (locoScroll) {
        locoScroll.update();
      }
    };

    ScrollTrigger.addEventListener("refresh", lsUpdate);
    ScrollTrigger.refresh();

    return () => {
      if (locoScroll) {
        ScrollTrigger.removeEventListener("refresh", lsUpdate);
        locoScroll.destroy();
        locoScroll = null;
        console.log("Kill", locoScroll);
      }
    };
  }, [start]);
}

What I want is to get the scroll y value from the locomotive scroll function into my main component so I can do stuff with it, like change the style of a component depending on scroll y position.

Any clues on how to do that?

MrFacundo
  • 167
  • 3
  • 13
  • You could add state variables in your custom hook and instead of `console.log(scrolly);` you could `setYScroll()` and `setXScroll()` in useEffect. Finally you can return a tuple `{xScroll, yScroll}` from custom hook to be de-structured in any of your components. – Yash Sharma Oct 17 '22 at 13:47

0 Answers0