基于framer-motion实现滚动固定并展开手风琴的动画方案求助

需求：实现根据滚动位置及上下滚动方向，自动展开对应的上一个/下一个可折叠面板。

当前实现存在的问题：

• 尝试通过scrollYProgress追踪滚动进度，判断面板是否处于屏幕中心（数值在0.49至0.51区间内），但展开或关闭手风琴时，屏幕与滚动位置会出现轻微偏移
• 该偏移导致动画闪烁，且经常出现跳面板的情况——比如#2面板展开后仅向下滚动一点，就直接选中了#5面板，当前方案无法解决该问题

当前代码片段：

function Accortion(props: { idx: number; label: string }) {
   const headingRef = useRef(null)
   const { scrollYProgress } = useScroll({ target: headingRef })

   useMotionValueEvent(scrollYProgress, 'change', latest => {
      if (latest > 0.49 && latest < 0.51) {
         approachesSelection.setState({ idx: props.idx })
      }
   })

   // ...
}

补充：按照adsy的建议调整后，方案可基本运行，但手风琴跳面板的问题仍然存在。

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