NextJS中GSAP Pin属性异常：添加后元素偏移布局

添加pin: true后#page2出现布局偏移，可通过以下几点修正：

1. 必须注册ScrollTrigger插件 #

你已导入插件但未在GSAP中注册，这会导致pin等核心功能异常。在useEffect开头添加注册代码：

useEffect(() => {
  gsap.registerPlugin(ScrollTrigger); // 关键：注册插件
  // 你的GSAP动画代码
}, []);

2. 修正Scroller配置 #

将scroller: 'body'改为scroller: window（或直接删除该属性，使用默认值window）。浏览器的滚动容器通常是window而非body，错误指定会导致位置计算偏差：

scrollTrigger: {
  trigger: "#page2",
  // scroller: 'body', // 删除或替换为scroller: window
  start: 'top top',
  markers : true,
  end : '+=100vh', // 替换原end值，逻辑更直观
  scrub : 2,
  pin : true,
}

3. 调整End参数逻辑 #

原end: 'top -100%'的计算逻辑易引发布局空间计算错误，改为end: '+=100vh'表示从触发点开始滚动100vh后结束，更符合固定页面的需求，也能避免占位元素高度异常。

4. 修复CSS布局冲突 #

• 将#page2的w-[100vw]改为w-full：100vw会包含滚动条宽度，易导致横向偏移；
• 给全局body添加样式，避免横向滚动干扰：

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

完整修正后的useEffect代码 #

useEffect(() => {
  gsap.registerPlugin(ScrollTrigger);
  
  gsap.to("#page2 h1", {
    x: '-130%',
    scrollTrigger: {
      trigger: "#page2",
      start: 'top top',
      markers: true,
      end: '+=100vh',
      scrub: 2,
      pin: true,
    }
  });
}, []);

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