如何在 framer-motion 扩展卡示例中添加滚动？

Question

1. 单击其中一张卡片
2. 卡片展开并弹出
3. 尝试滚动但只滚动了背景页面，而我想向下滚动以查看更多文本

我已经试过 overflow:hidden 不滚动（而且滚动条很丑）

我该如何解决这个问题？非常感谢！

https://codesandbox.io/s/framer-motion-animatesharedlayout-app-store-demo-i1kct?from-embed

Answer 1

似乎有几件事阻止了滚动：

1. height: auto 调整容器大小以适应内容。
2. overflow: hidden 而不是 scroll.
3. pointer-events: none 阻止元素获取滚动事件。

在 styles.css 中更改此块：

.open .card-content {
  height: auto;
  max-width: 700px;
  overflow: hidden;
  pointer-events: none;
} 

对此：

.open .card-content {
  max-width: 700px;
  overflow-y: scroll;
}

似乎有效。