Next.js中GSAP ScrollTrigger Pin功能失效问题求助

在Next.js项目中使用GSAP ScrollTrigger实现水平滚动时遇到以下问题：

• 注释掉scrollTrigger配置中的pin: true属性，代码可正常执行，但包裹sections的容器无法固定在顶部
• 取消注释pin: true后，整个触发容器（.main__content）完全不可见

解决建议 #

1. 调整Pin的目标元素 #

不要直接Pin宽度为300%的.main__content容器，它本身超出视口范围，启用pin后会因fixed定位导致元素移出可视区域。改为Pin它的父容器（视口尺寸的容器），这样固定的是视口范围内的区域，同时不影响内部水平滚动的逻辑。

2. 修正End值的计算时机 #

在useEffect空依赖数组中直接获取DOM元素的offsetWidth可能不准确（Next.js hydration后DOM尺寸可能还未完全渲染）。可以先用gsap.set确保元素样式稳定后再计算end值。

3. 清理ScrollTrigger实例（避免内存泄漏） #

组件卸载时一定要销毁创建的ScrollTrigger实例，防止在Next.js路由切换后残留旧的滚动监听逻辑。

修改后的代码 #

import React, { useEffect } from "react";
import OverlayMenu from "./OverlayMenu";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

function MainContent({ overlayRef }) {
  gsap.registerPlugin(ScrollTrigger);
  
  useEffect(() => {
    const sections = gsap.utils.toArray(".section");
    const mainContent = document.querySelector(".main__content");
    const pinContainer = document.querySelector(".pin-container");

    // 确保DOM渲染完成后获取准确宽度
    gsap.set(mainContent, { clearProps: "all" });
    const endValue = "+=" + mainContent.offsetWidth;

    // 创建动画与ScrollTrigger实例
    const scrollAnim = gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: pinContainer,
        scrub: 1,
        markers: true,
        start: "top top",
        end: endValue,
        pin: true,
      },
    });

    // 组件卸载时清理实例
    return () => scrollAnim.scrollTrigger.kill();
  }, []);

  return (
    <div className="main__content__wrapper w-[calc(100%_-_80px)] h-screen ml-20">
      {/* 作为Pin目标的父容器 */}
      <div className="pin-container w-full h-screen">
        <OverlayMenu overlayRef={overlayRef} />
        <div className="main__content w-[300%] bg-purple-700 h-screen flex flex-nowrap">
          <div className="section w-full h-screen bg-red-500">1</div>
          <div className="section w-full h-screen bg-blue-500">2</div>
          <div className="section w-full h-screen bg-yellow-500">3</div>
        </div>
      </div>
    </div>
  );
}

export default MainContent;

额外注意事项 #

• 检查页面是否存在额外的margin/padding导致滚动高度异常，Tailwind的h-screen需要确保没有被其他元素挤兑
• 可以给pin-container添加overflow: hidden，避免内部宽容器溢出影响页面布局
• 如果仍有定位异常，尝试移除父容器中不必要的relative定位属性

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