Framer Motion + Next.js中scrollYProgress不更新问题求助

核心问题分析 #

你遇到的scrollYProgress看似不更新，主要有两个常见原因：

1. MotionValue的调试方式错误：scrollYProgress是Framer Motion的响应式MotionValue对象，直接console.log只会输出初始对象，无法看到实时值变化。
2. useScroll的配置不匹配需求：你的目标是监听页面滚动并在指定容器的滚动范围内计算进度，但当前配置可能未正确绑定滚动上下文或触发范围。

分步解决方案 #

1. 正确调试scrollYProgress的值 #

用useEffect监听MotionValue的变化来查看实时进度：

import { useEffect } from 'react';

// 在组件内部添加
useEffect(() => {
  const unsubscribe = scrollYProgress.onChange(value => {
    console.log('滚动进度:', value);
  });
  return unsubscribe;
}, [scrollYProgress]);

2. 修复useScroll的配置（关键） #

如果你的目标是在页面滚动时，基于目标容器（300vh的深色容器）的视口可见范围计算进度，需要调整useScroll的配置：

• 若使用Next.js App Router，必须给组件加上'use client'指令（Framer Motion钩子依赖客户端DOM环境）。
• 添加offset参数，明确进度计算的触发范围（从容器顶部进入视口，到底部离开视口）。

修正后的useScroll配置：

'use client'; // App Router 必须添加，Pages Router可忽略

import { useScroll, useTransform, motion } from 'framer-motion';
import { useRef, useEffect } from 'react';

const History = () => {
  const targetRef = useRef(null);
  // 调整useScroll配置，添加offset限定滚动范围
  const { scrollYProgress } = useScroll({
    target: targetRef,
    offset: ["start start", "end end"] // 容器顶部进入视口时进度为0，底部离开时为1
  });

  // 监听进度变化调试
  useEffect(() => {
    const unsubscribe = scrollYProgress.onChange(value => {
      console.log('滚动进度:', value);
    });
    return unsubscribe;
  }, [scrollYProgress]);

  const x = useTransform(scrollYProgress, [0, 1], ["1%", "-95%"]);

  // 剩余组件代码不变...
};

3. 优化水平滚动效果（匹配示例需求） #

如果-95%的位移无法让卡片完全滚动到容器外，可根据卡片总宽度动态计算终点值，比如：

// 假设cards是已知数组，Card组件的宽度固定为300px，gap为16px
const totalWidth = cards.length * 300 + (cards.length - 1) * 16;
const containerWidth = typeof window !== 'undefined' ? window.innerWidth : 0;
// 计算需要位移的百分比，让最后一张卡片刚好进入容器
const endX = `-${((totalWidth - containerWidth) / containerWidth) * 100}%`;
const x = useTransform(scrollYProgress, [0, 1], ["1%", endX]);

验证要点 #

• 确保目标容器（ref={targetRef}的div）的高度足够（h-[300vh]），这样页面滚动时该容器会完整经过视口。
• 检查Next.js组件是否为客户端组件（App Router下必须加'use client'）。

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