Gsap ScrollTrigger :让我的部分在滚动上翻译

Question

我正在尝试从这个网站重现滚动效果：https://wemakefab.com/

gsap.registerPlugin(ScrollTrigger);
gsap.to(".scroll-content",{
    scrollTrigger:{
        trigger:".scroll-content",
        start:'top top',
        end:'bottom bottom',
        scrub:1.2,
        markers:true
    },
    y:-document.querySelector('.scroll-content').offsetHeight
})

它实际上是在卷轴上翻译的，但它也在网站的末尾创造了一些巨大的空白。在示例中，他们将css overflow:隐藏在正文上，但对我来说，它完全阻止了滚动。

<div class="scroll-content">
            <section class="green"></section>
            <section class="blue"></section>
            <section class="green"></section>
            <section class="blue"></section>
            <section class="green"></section>
            <section class="blue"></section>
            <section class="green"></section>
            <section class="blue"></section>
            <section class="green"></section>
            <section class="blue"></section>
        </div>

Answer 1

为了解决这个问题，我最终在scroll-content周围放置了一个高度为100vh的容器，这一切看起来都像是一种魔力