Scrolling content

In this tutorial, you’ll learn how to create screens with vertical and horizontal scrolling, as well as scrollable containers using Dynamic Panels.

All Scrolling

Vertical scrolling

  1. Create a new prototype in Justinmind. In our example, we’re using an iPhone X prototype.
  2. Using the Widgets palette, drag elements onto the screen and style them as you’d like.
  3. Drag an element towards the bottom of the Canvas. When you reach the bottom of the Canvas, the element will continue to move, and the Canvas height will automatically extend.                        Create vertical scroll
  4. Stop dragging the element and release it to finish expanding the Canvas height.

Click “Simulate”. You will be able to scroll down the screen.

Note: Make sure “Lock vertical scroll” is not checked in the Properties palette.

Lock scroll

Horizontal scrolling

Here’s how to create a prototype with horizontal scrolling:Horizontal scrolling

  1. Create a new prototype in Justinmind. In our example, we’re using a Web prototype.
  2. Using the Widgets palette, drag elements onto the screen and style them as you’d like.
  3. Drag an element towards the right side of the Canvas. When you reach the end of the Canvas, the element will continue to move, and the Canvas will become wider.Create Horizontal Scroll
  4. Stop dragging the element and release it to finish expanding the Canvas width.
Note: Make sure “Lock horizontal scroll” is not checked in the Properties palette.

Click “Simulate”. You will be able to scroll across the screen.

Container scrolling

Using Dynamic Panels, we can create scrollable areas within the Canvas.

Dynamic Panel Scrolling

  1. Drag a Dynamic Panel onto the Canvas.
  2. Double click on the Panel, and drag widgets inside and style them as you’d prefer.
  3. Once you’ve finished your design, select the Panel on the Canvas, and then drag using the indicators that appear until some elements are cut off by the end of the Panel. Create Dynamic Panel Scroll
  4. Look to the Properties palette and using the dropdown under Horizontal Overflow, change the scrolling to “Scroll auto”.Horizontal Overflow Dynamic Panel

Click “Simulate”. You will be able to scroll within that Dynamic Panel, but the rest of the Canvas will not scroll.

For each type of scrolling, you can also use the Properties palette to enter in the position of elements on the Screen or Panel instead of using the dragging method we describe here.