防止绝对 div（使用 ScrollTrigger 移动）拉长页面
Posted
技术标签:
【中文标题】防止绝对 div（使用 ScrollTrigger 移动）拉长页面【英文标题】：Prevent absolute div (moved with ScrollTrigger) from lengthening the page 【发布时间】：2021-12-17 02:22:15 【问题描述】：我想使用 ScrollTrigger 制作一个简单的视差效果。问题是包含“图像”（当前为红色框）的绝对 div 具有比页面本身更大的高度。因此，由于图像已随 ScrollTrigger 移动，因此在页脚之后有很大的间隙。有没有办法防止这个巨大的差距？
这是JSFiddle。要查看实际问题，预览窗口的宽度至少需要为 1050 像素。
<body class="test">
<section class="hero">
<div class="wrapper">
<h1>ScrollTrigger</h1>
</div>
</section>
<section class="main">
<div class="wrapper">
<div class="innerContainer">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, ipsum at efficitur pellentesque, turpis ante rhoncus leo, quis dignissim felis ante.</h2>
</div>
<div id="parallax" class="imgContainer">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<!-- Uncomment to see the "ghost" of the red boxes -->
<!-- <div class="imgContainer">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div> -->
</div>
</section>
<footer>
<div class="wrapper">
<h2>Footer</h2>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollTrigger.min.js"></script>
<script src="index.js"></script>
</body>
SCSS
*
padding: 0;
margin: 0;
font-family: monospace;
.wrapper
position: relative;
max-width: 1600px;
margin: auto;
padding: 20px;
body
.hero
height: 600px;
h1
font-size: 120px;
h2
font-size: 40px;
padding-top: 20px;
padding-bottom: 20px;
&.home
.hero
background-color: aqua;
position: absolute;
height: 3000px;
p
width: 40%;
font-size: 20px;
&.test
.hero
background-color: rgb(255, 136, 0);
section
h2
font-size: 180px;
header
width: 100%;
background-color: white;
filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.145));
footer
width: 100%;
background-color: rgb(225, 225, 225);
filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.145));
.innerContainer
position: relative;
z-index: 2;
.imgContainer
position: absolute;
top: 0;
left: 0;
width: 100%;
.img
background-color: yellow;
width: 500px;
height: 700px;
margin-top: 200px;
position: relative;
&:first-of-type
margin-top: 0;
&:nth-child(2n+1)
margin-left: 50%;
&:not(#parallax)
.img
background-color: transparent;
border: 1px solid red;
JS
gsap.set("#parallax",
y: 0
);
gsap.to('#parallax',
scrollTrigger:
trigger: '#parallax',
toggleActions: "restart pause reverse pause",
markers: true,
start: 'top center',
end: 'bottom bottom',
scrub: 0.5
,
y: -2200,
duration: 0.5
);
【问题讨论】：
【参考方案1】：这是因为标记。标记被添加到它们需要去的 DOM 中，如果标记位于页面底部或之后，这会延长页面。
您可以删除markers: true 或防止这种情况发生。
【讨论】：
以上是关于防止绝对 div（使用 ScrollTrigger 移动）拉长页面的主要内容，如果未能解决你的问题，请参考以下文章