使用ScrollTrigger缩放元素时溢出容器的问题排查

问题根源 #

• 你设置了ScrollTrigger的pin: true，默认会固定.square元素，固定后该元素变为position: fixed，脱离.test容器的文档流，导致.test的溢出控制失效。
• .test容器未配置overflow: hidden，即使元素在正常流中，溢出部分也无法被裁剪。

修复方案 #

1. 给.test添加溢出裁剪：设置overflow: hidden，让容器内部溢出的内容被隐藏。
2. 调整ScrollTrigger配置：将触发目标和固定目标改为.test，并修正滚动触发的起止范围，确保触发逻辑匹配容器的滚动区域。
3. 可选：调整缩放原点：如果需要元素从左上角开始缩放，给.square添加transform-origin: top left（默认是中心缩放）。

修改后的完整代码 #

JavaScript

gsap.registerPlugin(ScrollTrigger);

const tl = gsap.timeline({
    scrollTrigger: { 
        trigger: ".test", // 改为.test作为触发容器
        start: "top top",
        end: "+=100%", // 滚动范围匹配.test的高度
        scrub: true,
        pin: ".test", // 固定.test容器
        markers: true, 
    }
})

.to(".square", {
    scale: 2, 
    ease: "none",
    // transformOrigin: "top left" // 可选，按需添加
})

CSS

html, * {
    padding: 0px;
    margin: 0px;
}

body {
    display: flex;
    justify-content: center;
}

.container {
    width: 50%;
}

.test {
    width: 100%;
    height: 500vh;
    background-color: black;
    overflow: hidden; /* 添加溢出裁剪 */
}

.square {
    width: 100%;
    height: 100px;
    background-color: yellow;
    /* transform-origin: top left; 可选，按需添加 */
}

HTML

<body>
    <section class="container">
        <div class="test">
            <div class="square"></div>
        </div>
    </section>
    <section></section>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

内容的提问来源于stack exchange，提问作者betty_