Get correct height for smooth scroll

[Tee]

So I'm implementing a smooth scroll like this: 

 

useEffect(() => {
    const container = document.querySelector(".scroll-container");
    document.body.style.height = container.scrollHeight + "px";

    const onScroll = () => {
        gsap.timeline()
            .to(".scroll-container", {
                y: -pageYOffset,
                overwrite: "auto"
            }, 0)
    }

    document.addEventListener("scroll", onScroll)
}, [])

 

The smooth scroll is working fine, but its height is not being calculated properly. In other words, the scrollHeight I get from the container, won't be enough to scroll the whole container using smooth scroll. How do I calculate the height I need for smooth scroll? 

 

[ZachSaucier]

Hey Tee. Implementing smooth scrolling well is not the most trivial of tasks and is off topic for these forums. But if you have a question about GSAP or how to use it feel free to ask and we'll do our best to help.

 

I would recommend that you use an existing smooth scrolling library. We link to a few in the scrollerProxy docs which is useful for pairing them with ScrollTrigger.