GSAP+NextJS横向滚动问题：无法显示全部项目

问题核心分析 #

目前只能看到一个项目的关键原因：

• 横向容器宽度未适配多项目：.horizontal_scroll_container 设置为width: 100%，但内部包含两个项目区块，容器宽度不足以容纳并排布局，导致第二个项目被隐藏。
• 项目区块无固定宽度：.scroll_section 未定义宽度，无法保证每个项目占满视口，GSAP的横向位移逻辑无法正确触发。
• 滚动触发范围与位移量不匹配：当前end: "+=100%"的滚动范围和translateX: "-=100%"的位移量，需要容器总宽度为200%才能完全展示第二个项目。

具体修复步骤 #

1. 调整CSS样式 #

修正容器和项目区块的宽度设置，移除冲突的overflow属性：

.horizontal_scroll_container{
    width: 200%; /* 两个项目各占100%，总宽度设为200% */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* 保留横向滚动能力，移除重复的overflow: hidden */
    scroll-behavior: smooth;
}
.scroll_section{
    flex: 0 0 auto;
    width: 50%; /* 每个项目占容器宽度的50%，对应视口100% */
    display: inline-flex;
}

若希望项目严格占满视口，也可将.scroll_section设为width: 100vw，.horizontal_scroll_container设为200vw。

2. 优化GSAP动画配置 #

确保滚动触发范围与位移量匹配，调整为更直观的视口高度作为滚动区间：

useEffect(() => {
  const pin = gsap.fromTo(
    sectionRef.current,
    {
      translateX: 0,
    },
    {
      translateX: "-100%", /* 直接位移容器一半宽度，逻辑更清晰 */
      ease: "inOut",
      duration: 9,
      scrollTrigger: {
        trigger: triggerRef.current,
        start: "top top",
        end: "+=100vh", /* 用视口高度定义滚动触发范围 */
        scrub: 1,
        pin: true,
      },
    }
  );
  return () => {
    pin.kill();
  };
}, []);

3. 修复NextJS Image渲染（可选） #

确保图片正确占满容器，添加相对定位父容器和尺寸控制：

// 修改Image组件所在的父容器
<div className="w-full lg:w-2/3 flex flex-wrap px-3 relative">
  <Image 
    priority={true} 
    src={comingSoon} 
    alt="项目占位图" 
    className="imgProject w-full h-auto object-cover" 
    fill // 配合父容器relative实现自适应填充
  />
</div>

效果验证 #

修改完成后，进入滚动触发区域时会固定显示第一个项目，向下滚动时GSAP会横向移动容器展示第二个项目；同时可通过横向滚动条手动切换两个项目，完全满足需求。

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