解决Framer Motion useScroll同时影响同组件双实例的问题

核心问题是你当前的动画逻辑绑定了全局页面滚动，导致所有组件实例同步触发。要实现独立触发，得让每个组件只响应自身的视口状态和滚动关联，以下是具体修正方法：

具体步骤 #

• 给每个组件配独立的容器Ref
  在StickyContainer组件内部单独定义ref，不要用全局共享的：

  const containerRef = useRef<HTMLDivElement>(null);
  

• 正确配置useScroll
  把target设为组件自身的containerRef，这样监听的是这个组件在视口中的滚动位置变化，而非全局页面。如果你的粘性容器依赖页面滚动，不需要设置container参数，搭配offset控制动画触发的视口范围：

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"] // 组件刚进入视口到完全离开的区间触发动画
  });
  

• 加视口可见性判断
  用useInView钩子判断组件是否在视口中，只有可见时才执行动画，避免全局滚动影响未进入视口的实例：

  const isInView = useInView(containerRef, {
    once: false, // 可根据需求设为true（只触发一次）或false（滚动进出都触发）
    margin: "-100px 0px" // 调整触发的距离阈值，提前/延后触发动画
  });
  

• 绑定动画与可见状态
  把动画的x属性和isInView关联，只有组件在视口中时才应用滚动驱动的动画：

  <motion.div
    style={{
      x: isInView ? scrollYProgress.interpolate([0, 1], ["0%", "-50%"]) : 0
    }}
  >
    {/* 你的嵌套内容 */}
  </motion.div>
  

• 检查CSS配置
  确保粘性容器的父元素没有设置overflow: hidden（会让sticky失效），同时父容器要有足够高度来触发滚动行为，保证position: sticky能正常工作。

踩坑提醒 #

如果之前设container后动画失效，大概率是因为你的滚动容器是页面本身，不是组件内部的容器——只有当容器自身是可滚动元素（带overflow: auto/scroll且高度受限）时，才需要设置container参数，页面滚动场景下只需要target就行。

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