React应用中如何让iframe内的Figma原型支持滚动？

我之前也遇到过一模一样的问题！Figma嵌入iframe后滚动失效，大多是Figma自身的设置或者iframe的样式配置没到位，咱们一步步来解决：

第一步：先检查Figma原型的分享设置 #

这是最容易被忽略的点！打开你的Figma原型分享页面，找到「高级设置」，一定要确认勾选了**「允许用户滚动查看超出视图的内容」**。如果Figma这边锁了滚动权限，不管你怎么调代码都没用，先把这个开关打开再说。

第二步：用滚动容器包裹iframe（亲测有效） #

你之前尝试过用div包裹，但可能样式没写对。正确的做法是让iframe占满外层容器的高度，然后给外层容器设置固定高度和滚动属性。React里的代码可以这么写：

<div style={{
  width: '100%',
  height: '600px', // 你需要的容器高度
  overflowY: 'auto',
  position: 'relative',
  borderRadius: '8px' // 可选，美化一下
}}>
  <iframe
    src="https://www.figma.com/proto/xyz123?embed_host=share"
    width="100%"
    height="100%" // 让iframe填满容器，不要设固定值
    style={{ border: 'none', display: 'block' }} // display:block去掉默认的边距
    allowFullScreen
  />
</div>

这里的关键是把iframe的height设为100%，让它完全撑开外层容器，当Figma原型的内容高度超过容器的600px时，外层容器就会自动出现垂直滚动条。

第三步：补充调整（可选） #

如果上面的方法还是不行，可以试试这两个小技巧：

• 给iframe加上scrolling="yes"属性（虽然HTML5里这个属性已过时，但部分浏览器对Figma的iframe仍能生效）：

  <iframe
    // 其他属性不变
    scrolling="yes"
  />
  

• 检查Figma原型的视图设置：在Figma里打开原型模式，确认起始帧的尺寸没有被设置为「固定」，如果原型内容本身被Figma裁剪了，嵌入后自然也没法滚动。可以把原型的设备设置为「自定义」，确保内容完整。

总结 #

优先检查Figma的分享权限，再调整容器和iframe的样式配置，这两个步骤基本能解决90%的滚动问题。我当时就是漏看了Figma的滚动开关，折腾了半天，后来打开开关再调一下容器样式就搞定了！

内容来源于stack exchange