GSAP实现固定区块无需悬浮指定div即可滚动内部内容

核心实现逻辑：

• 不给内部文本容器设置overflow: scroll，完全通过CSS transform手动控制文本位移，绕开原生滚动必须悬浮在滚动容器上才能触发的限制
• 滚轮事件绑定在最外层.configurator容器上，鼠标在区块内任意位置（图片、头部、文本区）滚动都会被捕获
• 动态计算内部文本的可滚动总长度，和ScrollTrigger的固定时长绑定，文本滚动到底部的瞬间自动解除区块固定，恢复页面正常滚动
• 加了尺寸变化监听，窗口缩放时自动重新计算滚动距离，避免位置错位

完整JS代码 #

替换原有GSAP初始化逻辑即可：

$(function() {
  gsap.registerPlugin(ScrollTrigger);

  const container = document.querySelector(".configurator");
  const optionsWrap = document.querySelector(".configurator__options");
  const optionsInner = document.querySelector(".configurator__options-inner");
  
  // 计算内部文本最大可滚动距离
  let maxScrollDistance = 0;
  const calcScrollDistance = () => {
    maxScrollDistance = optionsInner.offsetHeight - optionsWrap.offsetHeight;
  };
  calcScrollDistance();
  window.addEventListener("resize", calcScrollDistance);

  // 滚动进度值 0对应文本在顶部，1对应文本滚到底
  let scrollProgress = 0;

  // 给整个配置区块绑定滚轮事件，全域触发
  container.addEventListener("wheel", (e) => {
    const pinInstance = ScrollTrigger.getById("configPin");
    // 区块未处于固定状态时不拦截默认页面滚动
    if (!pinInstance?.isActive) return;
    e.preventDefault();
    
    // 按滚轮速度累加进度，系数可根据手感调整
    scrollProgress += e.deltaY * 0.001;
    // 限制进度在合法区间
    scrollProgress = gsap.utils.clamp(0, 1, scrollProgress);
    
    // 同步内部文本位移，加短缓动模拟原生滚动手感
    gsap.to(optionsInner, {
      y: -maxScrollDistance * scrollProgress,
      duration: 0.25,
      ease: "power2.out",
      overwrite: true
    });

    // 同步ScrollTrigger滚动位置，进度到1时自动解除固定
    pinInstance.scroll( pinInstance.start + (pinInstance.end - pinInstance.start) * scrollProgress );
  }, { passive: false });

  // 初始化固定效果
  gsap.to(container, {
    ease: "none",
    scrollTrigger: {
      id: "configPin",
      trigger: container,
      markers: true,
      start: "top top",
      // 固定结束距离和内部文本可滚动长度匹配
      end: () => `+=${maxScrollDistance + window.innerHeight}`,
      pin: container,
      scrub: 2,
      onUpdate: (self) => {
        // 页面原生滚动时同步文本位置，避免错位
        scrollProgress = self.progress;
        gsap.set(optionsInner, {
          y: -maxScrollDistance * scrollProgress
        })
      }
    },
  });
});

配套CSS调整 #

给内部文本容器加定位，移除不必要的滚动相关设置：

.spacer {
  height: 200px;
  background: black;
}

.configurator {
  height: 100vh;
  overflow: hidden;
}
.configurator__header {
  border-top: 1px solid black;
  padding-top: 30px;
}
.configurator__options {
  background: lightblue;
  overflow: hidden;
  height: 600px;
  padding: 0 30px;
  position: relative;
}
.configurator__options-inner {
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
}
.configurator__images img {
  width: 100%;
}

.footer {
  height: 1000px;
  background-color: black;
}

效果说明 #

• 鼠标在.configurator内任意位置滚动，都会驱动右侧文本同步位移，和参考的车企配置页交互逻辑一致
• 文本未滚到底时区块保持固定，文本完全滚动到末尾后自动解除固定，页面恢复正常向下滚动
• 向上滚动时逻辑反向，文本回到顶部后区块会跟随页面向上滚动离开视口
• 没有使用原生overflow: scroll，不会出现默认滚动条、必须悬浮在文本区才能滚动的问题

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