Scrollable Areas

There are two ways to do scrollable areas in Protowire. The first method involves masking the content you want scrollable while the second involves setting the header and footer to be fixed. The first method is more flexible - the scrollable area can take up part of the screen and can scroll vertically, horizontally or both. The latter being useful for maps. The second method is used frequently when designing smartphone apps and has the advantage that all the scrollable content is visible.     

Scollable Area Types

Using a Mask

To create a scrollable area you need to have a mask and the scrollable content inside a layer group. Select the layer group and click on the Scroll Area button in the Protowire panel. The layer group icon will then change to indicate it's a scrollable area. Whether a scrollable area scrolls vertically or horizontally or both depends on whether the content is longer and/or wider than the mask. It's a good idea to put your content in a symbol so you can see all of it without having to remove the mask. To remove the scrolling from a layer group, select it and press the Remove Scroll button. 

Using Fixed Headers and Footers

You follow the same procedure for making a screen scrollable in Sketch's built-in prototyping. It's important that you use an artboard preset when creating the artboard. If one of the existing presets is not adequate you can create a custom one. The artboard preset determines the viewport size i.e. the size of the screen. You then make the artboard longer by dragging the bottom handle so it's long enough to contain the scrollable content. It's a good idea to turn off "Adjust content on resize" before doing this. In the inspector sidebar Resized will show after the preset name. Next, select the header and footer and check "Fix position when scrolling" in the inspector sidebar. Now the whole artboard is scrollable apart from the fix position layers. If you want to make hotspots fixed you will also need to check "Fix position when scrolling" for them. Hotspots inside symbols can have a fixed position but layers can't.