javascript - 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 溢出：隐藏在身体上，但对我来说它完全阻止了滚动。

<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

为了解决这个问题，我终于在滚动内容周围放置了一个高度为 100vh 的容器，这一切似乎都像一个魅力