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?