如何获取并存储Framer Motion中scrollYProgress的历史值？

要实现这个需求，核心是用React的状态来持久化历史值，每次scrollYProgress更新时对比最新值与历史值，再更新状态即可。具体实现如下：

实现步骤 #

• 用useState初始化历史值，初始值直接取scrollYProgress的当前值
• 在useMotionValueEvent的change回调中，拿到最新值后计算差值，再更新历史值为当前最新值
• 基于差值做UI渲染逻辑

完整代码示例 #

import { useState } from "react";
import { useMotionValueEvent, useScroll } from "framer-motion";

function ScrollTrackerComponent() {
  const { scrollYProgress } = useScroll();
  // 初始化历史值为scrollYProgress的初始状态
  const [prevScrollProgress, setPrevScrollProgress] = useState(scrollYProgress.get());
  // 存储滚动差值，也可以直接在渲染时计算
  const [scrollDiff, setScrollDiff] = useState(0);

  useMotionValueEvent(scrollYProgress, "change", (latest) => {
    // 计算最新值与历史值的差值
    const diff = latest - prevScrollProgress;
    setScrollDiff(diff);
    
    // 更新历史值为当前最新值，供下一次对比使用
    setPrevScrollProgress(latest);
    
    // 可扩展逻辑：根据差值判断滚动方向
    // if (diff > 0) console.log("向下滚动");
    // if (diff < 0) console.log("向上滚动");
  });

  return (
    <div>
      {/* 根据差值渲染内容 */}
      <p>当前滚动差值: {scrollDiff.toFixed(4)}</p>
      {scrollDiff > 0 && <p>正在向下滚动</p>}
      {scrollDiff < 0 && <p>正在向上滚动</p>}
    </div>
  );
}

export default ScrollTrackerComponent;

关键点说明 #

• 用useState存历史值：React状态更新会触发组件重渲染，确保UI能实时响应差值变化
• 回调执行顺序：先计算差值，再更新历史值，避免下一次对比时使用错误的历史数据
• 存储多组历史值：如果需要保留最近N次记录，可以把状态改成数组，比如const [historyValues, setHistoryValues] = useState([scrollYProgress.get()]);，每次更新时用setHistoryValues(prev => [...prev.slice(-4), latest])保留最近5条记录

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