滚动与溢出

溢出

当容器内元素的尺寸和位置超出容器范围时，便产生了溢出。常见场景：

• 预览图容器固定 500×500，但内含 1000×1000 的图片
• 列表区域固定 375×600，但包含 20 个列表项，总高度超过 1500
• Banner 区域固定 345×220，但横向排列了 5 张图片

容器滚动

当容器内元素溢出时，可为容器添加滚动行为，在预览时通过滑动或拖拽浏览全部内容。

设置方法

1. 选中容器
2. 右侧属性面板切换到「原型」标签
3. 设置溢出滚动模式：

滚动模式	适用场景
无滚动（默认）	超出边界的内容无法查看
水平	头图轮播器等横向滚动内容
垂直	常见的纵向内容列表
水平与垂直	放大镜等需要双轴滚动的内容

注意：容器内元素溢出与容器溢出显示屏幕不同——后者在预览时也可滚动查看，但那是预览器的滚动行为，而非容器的滚动行为。

元素滚动行为

选中容器内的元素，在右侧属性面板的约束属性中设置滚动行为（如果容器添加了自动布局，此选项不可见）。

随父级滚动

默认行为。滚动容器时，元素跟随容器一起滚动。

固定

滚动容器时，元素相对屏幕保持固定位置。典型用途：固定顶部导航栏、固定底部标签栏。

吸顶固定

元素跟随滚动，直到碰到屏幕顶端后固定在顶部。

注意事项：

• 确保元素所在容器已添加溢出滚动，否则滚动行为不生效
• 如果容器内同时包含固定和滚动元素，相应元素在左侧图层树中会自动分组

常见问题

问题	解决方法
滚动不生效	确认容器内容超出容器尺寸
固定元素被遮挡	确保固定元素在图层树最上层
吸顶固定没反应	检查容器是否已设置溢出滚动