要在MasterGo中实现页面局部滚动动画,需将内容放入容器并设溢出行为为垂直或水平滚动;固定元素须设“预览滚动时位置固定”且位于容器外部;组合智能动画可保持滚动位置。

要在MasterGo中让页面局部区域支持滚动动画,必须将可滚动内容放入容器并明确设置溢出行为,否则预览时内容会直接被裁剪而无法滑动。
设置垂直滚动容器
第一步:在设计模式下,拖拽一个矩形容器(Frame)到画布上,作为滚动区域的外框。
第二步:在该容器内绘制或粘贴需要滚动的内容(如长列表、多行文字、堆叠卡片),确保内容高度超出容器本身——【内容高度必须大于容器高度,否则滚动无效】。
第三步:切换到原型模式 → 选中该容器 → 右侧属性栏中找到「溢出行为」→ 点击下拉菜单选择「垂直滚动」。
这一步做完后,预览时就能用鼠标滚轮或触控板上下拖拽内容了。注意:如果内容刚好填满容器、没有超出,滚动条不会出现,也无法触发滚动交互。
实现水平滚动效果
方法一:直接拉宽容器内部内容
在容器中横向排列多个组件(比如6张图标),使总宽度明显超过容器宽度;然后在原型模式下选中容器,将「溢出行为」设为「水平滚动」。
方法二:利用iPhone画板模拟真实场景
先插入iPhone 16 Pro画板 → 拖入一个子容器 → 在子容器里放一排图片 → 将子容器宽度拉窄至只显示前两张 → 再把整个iPhone画板宽度略微收窄 → 最后选中子容器,设置「水平滚动」。
【务必确认子容器未被锁定约束,否则缩放时会失效】
让部分元素固定不随滚动移动
当你设置了滚动容器,但希望标题栏、底部按钮等元素始终可见,就得单独处理它们:
在设计模式下,选中那个不想滚动的图层(例如顶部导航栏)→ 右侧属性栏找到「约束」区域 → 勾选「预览滚动时位置固定」。
这个选项只在原型预览中生效,设计模式下看不出变化。若勾选后仍跟随滚动,请检查该图层是否被错误地嵌套在滚动容器内部——它必须是滚动容器的同级图层,或位于滚动容器外部。
组合滚动与智能动画
① 先完成一个带垂直滚动的页面A(如商品详情页);
② 复制该页面得到页面B,在B中调整某个卡片的位置或透明度(例如让它从底部向上滑入);
③ 用连接线从页面A的某个按钮指向页面B;
④ 在交互设置中,动画类型选「智能动画」,过渡曲线选「缓入缓出」;
这样跳转时不仅有页面切换动效,滚动容器内的内容也会保持原有滚动位置,不会重置回顶部——这是用户预期的真实行为。











