Scrolling content

In this tutorial, you’ll learn how to create scrollable pages and containers.

All Scrolling

Page 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

Container scrolling

Using Dynamic Panel widgets, we can create scrollable areas and carousels within the Canvas.

Dynamic Panel Scrolling

  1. Drag a Dynamic Panel onto the Canvas.Drag Dynamic Panel To 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.