In this tutorial, you’ll learn how to create scrollable pages and containers.
- Create a new prototype in Justinmind. In our example, we’re using an iPhone X prototype.
- Using the Widgets palette, drag elements onto the screen and style them as you’d like.
- 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.
- Stop dragging the element and release it to finish expanding the Canvas height.
Click “Simulate”. You will be able to scroll down the screen.
Using Dynamic Panel widgets, we can create scrollable areas and carousels within the Canvas.
- Drag a Dynamic Panel onto the Canvas.
- Double click on the Panel, and drag widgets inside and style them as you’d prefer.
- 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.
- Look to the Properties palette and using the dropdown under Horizontal Overflow, change the scrolling to “Scroll auto”.
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.