How to detect scroll position with smooth scroll?

[maksderylo]

I want to keep the benefits of smooth scroll whilst being able to perform animations depending on scroll position

[sadeghbarati]

Hi,

You can use addListener event and store scroll position with CSS variables like

const root = document.documentElement;
scrollbar.addListener(( { offset } ) => {
   root.style.setProperty('--scrollbar-position-y', offset.y);
});

// when you need the variable
getComputedStyle(document.documentElement).getPropertyValue('--scrollbar-position-y');

---

Or use GSAP ScrollTrigger + ScrollTrigger scrollerProxy

https://codepen.io/GreenSock/pen/oNLqgBm

[maksderylo]

Thanks a lot I will look into it