基于滚动位置实现Framer Motion元素淡入淡出问题排查

你的核心问题是useScroll的offset参数设置错误，导致滚动进度的范围没有覆盖目标元素从视口下方到上方的完整过程，进而无法触发向上滚动时的淡入效果。

修改后的代码 #

const ref = useRef(null)
const { scrollYProgress } = useScroll({
    target: ref,
    // 调整offset，让进度范围对应元素中心从视口底部到顶部的过程
    offset: ["center end", "center start"],
})
const opacity = useTransform(
    scrollYProgress,
    [0, 0.5, 1],
    [0, 1, 0],
)

// ...

<div ref={ref} className="flex flex-col items-center justify-center border border-blue-600 text-7xl h-screen">
    <motion.div
        style={{
            opacity: opacity,
        }}
    >
        hello
    </motion.div>
</div>

关键调整说明 #

原来的offset: ["start end", "end end"]仅覆盖了目标元素从顶部接触视口底部到底部接触视口底部的区间，这个范围只对应目标元素从下方进入视口的单向过程，向上滚动时无法触发反向的进度变化。

调整后的offset: ["center end", "center start"]定义了两个精准的滚动节点：

• 当目标元素的中心到达视口底部时，scrollYProgress为0
• 当目标元素的中心到达视口顶部时，scrollYProgress为1

这样滚动过程中：

• 向下滚动：元素中心从视口顶部→中间→底部，opacity从0→1→0
• 向上滚动：元素中心从视口底部→中间→顶部，opacity从0→1→0

完全实现了“元素中心在视口中间时完全显示，上下滚动逐渐淡出”的需求。

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