Scrolling content

In this article, you’ll learn how to add scrollable pages and areas in your prototypes.
Create scrollable pages

Page scroll

Drag an element towards the bottom of the Canvas. As you reach the edge, the element will continue to move and the Canvas height will automatically lengthen.
Move an element toward the bottom of the Canvas to extend its height
You can also type in an element’s vertical position in the Properties palette.

Tap the ‘Play’ button to simulate your prototype and see how you can scroll down the screen.

Note: Make sure ‘Lock vertical scroll’ is not checked in the Properties palette

Make sure horizontal and vertical scrolling is not locked

Container scroll

  1. Add a Dynamic Panel to the Canvas. You can find it in the Toolbar under ‘Dynamic content’ or by hitting the D keyPlace a dynamic panel on the canvas
  2. Hold Command (on Mac) or Control (on Windows) and drag elements into the panel. You’ll see a blue tint when you’re dragging an element inside.Hold command on Mac or control on Windows and drag elements into the dynamic panel
  3. Resize the panel’s width or height until some elements are cut off.Use the indicators to resize the dynamic panel until some elements are cut off
  4. Look to the Properties palette and change the ‘Hor. (horizontal) Scroll’ to ‘Always’ to create a horizontally scrollable area.Select scroll always to create a scrolling container Change the ‘Ver.’ (vertical) Scroll’ to ‘Always’ to create a vertically scrollable area.
  5. Tap the ‘Play’ button to simulate your prototype. Check out how you can scroll within the panel’s area, but the rest of the Canvas won’t move.Scroll in the dynamic panel and the rest of the screen will not scroll