Gsap ScrollTrigger ：让我的部分在滚动时翻译

Posted 2023-05-08

【中文标题】Gsap ScrollTrigger ：让我的部分在滚动时翻译

【英文标题】：Gsap ScrollTrigger : Make my section translate on scroll

【发布时间】：2021-11-12 04:14:48

【问题描述】：

我正在尝试从这个网站重新制作滚动效果：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:hidden 放在身体上，但对我来说它完全阻止了滚动。

<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>

【问题讨论】：

没有您的 CSS，我们无法提供帮助。请发minimal, complete, and verifiable example。

【参考方案1】：

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

【讨论】：

你可能没有这样做，取你当前的 div 并尝试 max-height: 100vh