Gsap ScrollTrigger实现滚动section平移动效出现尾部空白问题求助

你遇到的两个问题根源是实现逻辑缺了占位撑高的环节：

1. 尾部空白：你将.scroll-content向上平移了完整的自身高度，最后一屏内容被完全移出视口，原本内容占据的下方区域就变成了空白。
2. body设置overflow:hidden后无法滚动：你的ScrollTrigger默认绑定原生页面滚动条，禁用原生滚动后就失去了滚动触发源，动画自然不会触发。

第一步：调整DOM结构 #

新增一个占位容器，用来为ScrollTrigger提供滚动高度，结构如下：

<!-- 新增占位容器，和scroll-content同级 -->
<div class="scroll-height-placeholder"></div>
<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 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  /* 禁用原生滚动条 */
  overflow: hidden;
}
.scroll-content {
  /* 固定内容在视口顶部，通过transform控制位移模拟滚动 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
section {
  /* 每个区块占满一屏视口 */
  height: 100vh;
  width: 100%;
}
.green {
  background: #2ecc71;
}
.blue {
  background: #3498db;
}

第三步：修改GSAP逻辑 #

gsap.registerPlugin(ScrollTrigger);

const scrollContent = document.querySelector('.scroll-content');
const placeholder = document.querySelector('.scroll-height-placeholder');
// 获取内容总高度
const contentHeight = scrollContent.offsetHeight;
// 给占位容器设置和内容一致的高度，撑出滚动空间
placeholder.style.height = `${contentHeight}px`;

gsap.to(scrollContent, {
  scrollTrigger: {
    // 触发器改成占位容器
    trigger: placeholder,
    start: 'top top',
    end: 'bottom bottom',
    scrub: 1.2,
    markers: true
  },
  // 偏移值改为 内容高度-视口高度，保证最后一屏刚好完整显示在视口内，不会出现空白
  y: -(contentHeight - window.innerHeight)
})

补充注意项 #

如果需要适配窗口大小变化，可添加resize监听，实时更新占位容器高度和动画偏移值，避免出现错位。

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