如何修复Y轴滚动动画导致的多余空白间隙问题？

问题背景 #

开发Y轴滚动动画时，通过滚动修改section的Y轴transform属性实现向上移动效果，但最后一个section与footer之间出现了累积的多余空白间隙。尝试过设置固定body高度（导致底部section消失）、给footer添加相同动画（仍残留间隙），均未解决问题。

核心原因 #

直接修改元素的y属性仅改变视觉位置，元素在文档流中占据的原始空间并未改变。多个section向上移动后，它们原本占据的空间叠加，就形成了footer前的空白间隙。

解决方法 #

方法一：容器整体位移（最优方案） #

将所有需要动画的section包裹在一个容器内，通过控制容器的Y轴位移实现滚动动画。这种方式不会在文档流中留下多余空间，footer会自然紧跟在容器下方。

修正后代码

HTML

<body style="margin: 0 !important">
  <div class="scroll-container">
    <section class="one">text</section>
    <section class="two">text two</section>
    <section class="three">text three</section>
  </div>
  <div class="footer">footer</div>

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

CSS

body {
  overflow-x: hidden;
}
.scroll-container {
  position: relative;
}
.one {
  width: 100%;
  height: 100vh;
  background-color: yellow;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.two {
  width: 100%;
  height: 200vh;
  background-color: salmon;
  display: flex;
  justify-content: center;
  align-items: center;
}
.three {
  width: 100%;
  height: 100vh;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer {
  width: 100%;
  height: 30vh;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

JS

gsap.registerPlugin(ScrollTrigger);

// 计算容器总高度，确保滚动范围覆盖完整动画
const container = document.querySelector('.scroll-container');
const totalScrollDistance = container.offsetHeight - window.innerHeight;

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".scroll-container",
    start: "top top",
    end: `+=${totalScrollDistance}`,
    scrub: true,
    markers: true
  }
});

// 调整位移量，确保动画结束后最后一个section刚好贴合footer
tl.to(".scroll-container", {
  y: '-300vh', // 总位移对应三个section的高度总和减去视口高度，可按需调整
  ease: "none"
});

方法二：精准匹配单个元素的位移与触发范围 #

针对最后一个section，设置位移量等于自身高度，同时调整ScrollTrigger的end值与元素高度匹配，让动画结束时元素刚好移动到自身原始位置的上方，文档流空间被footer填充。

修改后的JS示例（仅调整第三个动画）

const tl_two = gsap.timeline({
  scrollTrigger: { 
    trigger: ".three", 
    start: "top top",
    end: "+=100vh", // 与.three的高度一致
    scrub: true,
    markers: true,
  }
})

tl_two.to(".three", {
  y: '-100vh', // 位移量等于自身高度
})

这种方法需要逐个适配每个元素的动画参数，适合动画逻辑独立的场景。

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