Figma中溢出滚动失效的主因是父Frame未启用Clip content且内容Frame未正确嵌套超限。需依次启用裁剪、嵌套超尺寸内容Frame、在Prototype中设置滚动方向、禁用Auto Layout、排除遮挡图层。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如果您在Figma中为原型设置了溢出滚动,但嵌套容器内的内容仍无法滚动,问题通常并非交互设置遗漏,而是父级容器未启用裁剪且子内容未正确嵌套在具备尺寸约束的视口Frame中。以下是解决此问题的步骤:
一、确认并启用“Clip content”裁剪功能
“Clip content”是Figma实现视觉滚动区域的基础前提,未启用时即使设置溢出滚动,内容也会完全显示而无裁剪边界,导致滚动行为失效。
1、选中作为滚动视口的外层Frame(即您希望用户看到的固定尺寸区域)。
2、在右侧属性面板中,找到“Constraints”下方的“Clip content”选项。
3、勾选该复选框;此时该Frame将创建一个独立的裁剪上下文,仅显示其内部子Frame在边界内的部分。
二、确保内容Frame严格嵌套且尺寸超限
Figma的溢出滚动仅对直接子级Frame生效,且该子级必须在至少一个轴向上超出父Frame尺寸,否则滚动条不会触发。
1、将待滚动的内容全部放入一个独立Frame中,命名为“内容Frame”。
2、将“内容Frame”完整拖入目标视口Frame内部,确保其在图层面板中处于视口Frame的直接子级位置。
3、调整“内容Frame”的高度(垂直滚动)或宽度(水平滚动),使其明显大于视口Frame的对应尺寸(例如视口高400px,“内容Frame”设为800px)。
三、在Prototype面板中正确配置Overflow scrolling
滚动行为必须在原型模式下显式指定方向,且仅作用于已启用Clip content的Frame本身,而非其子元素或组。
1、切换至右上角【Prototype】标签页。
2、点击视口Frame左上角的连接圆点,打开交互设置面板。
3、在“Overflow scrolling”下拉菜单中,选择“Vertical scrolling”或“Horizontal scrolling”,不可选“None”或留空。
4、确认“Scrolling”开关处于开启状态(蓝色)。
四、排除自动布局与Flex容器干扰
若视口Frame或其父级启用了Auto Layout(如stackMode: VERTICAL),可能因弹性尺寸计算覆盖固定高宽,导致裁剪失效或滚动不可见。
1、选中视口Frame,在Design面板中检查是否启用了“Auto layout”。
2、如已启用,点击右上角“⋯”菜单,选择“Remove auto layout”以还原为普通Frame。
3、手动为其设置明确的Width和Height数值(如width: 375px, height: 600px),禁用“Resize to fit content”。
五、验证滚动区域无遮挡图层或透明背景干扰
顶部或底部存在同级图层(如装饰矩形、标题栏)可能覆盖滚动热区,或背景为透明时误判为无内容可滚。
1、在图层面板中,确认视口Frame是当前画布层级中唯一被选中用于滚动的Frame。
2、检查其上方是否存在其他非锁定图层,尤其是position为Absolute或Z-index较高的遮罩图形。
3、临时将视口Frame背景色设为鲜明颜色(如#ff0000),观察预览时是否完整呈现,排除透明背景导致的视觉误判。


















