我正在ScrollTrigger(.square)类上进行zoom .当ScrollTriggered放大并溢出到".Test"类的外部时，我希望zoom 在".test"类内部可见，并且不希望它在其他容器上溢出，我的代码出了什么问题？
gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".square",
start: "top top",
end: "+=100%",
scrub: true,
pin: true,
markers: true,
}
})
.to(".square", {
scale: 2,
ease: "none"
}) html, * {
padding: 0px;
margin: 0px;
}
body {
display: flex;
justify-content: center;
}
.container {
width: 50%;
}
.test {
width: 100%;
height: 500vh;
background-color: black;
}
.square {
width: 100%;
height: 100px;
background-color: yellow;
}<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>