React滚动在Framer Motion动画元素内不起作用

Question

我试图在Framer Motiondiv中放置一个非常简单的滚动动画，类似于以下内容：

<motion.div
animate={{
translateY: [1000, 0]
}}
transition={{ duration: 1 }}
>
<BottomSection>            
<ScrollDiv>
<Link to="scroll-down" spy={true} smooth={true} offset={50} duration={500}>
Scroll
</Link>
</ScrollDiv>
</BottomSection>
</motion.div>

<Space top="_360" bottom="_360" />
<Element name="scroll-down">
</Element>
enter code here

但是，如果我把我的ScrollDiv放在motion.div旁边，滚动就可以正常工作。这两个库之间是否存在某种不兼容？我该怎么解决这个问题？

Answer 1

虽然我没有答案，但也许我可以帮助缩小范围。因此，我将react缩放平移-捏夹库与Framer运动库结合使用，并认为两者之间可能不兼容。在禁用反缩放-平移-捏夹后，Framer Motion仍然表现出相同的行为(在拖动事件中注册第二个手指触摸时，照片位置会摆动——我认为这是Framer Motion在两个手指位置之间来回切换，以确定在库中显示照片的位置(。

我不知道这是你所看到的，还是直接有帮助，但删除ScrollDiv功能，看看Framer Motion是否仍然单独导致问题，至少可以让你排除一个库，集中精力。至于成帧器运动，我确实发现了这个bug，看起来还没有一个有效的解决方案

https://github.com/framer/motion/issues/185