The scroll zone feature lets you add a scrollable area to a page of an App Studio issue. The content for the scrollable area comes from a different layout (the scrollable layout). Once you set up a scroll zone, you can populate it with whatever you want, whether it's a long run of text, a large panoramic picture, or a series of interactive elements. You can then use that scrollable layout in multiple layouts within a layout family. (For more information, see " Understanding layout families .")
Referenced scrollable layouts are exported as HTML in the same way the host layout is. That means they work the same way in terms of font usage and the Convert To Graphic on Export option for text boxes.
Referenced layout can contain their own interactive objects, and they will work as they would in the host layout.
To set up a scroll zone for an App Studio issue:
- Navigate to a layout that is part of a layout family.
- Draw a picture box to represent the size and the location of the scroll zone. Make sure the box is selected.
- In the HTML5 palette, click Scroll Zone .
Scroll zone controls
- Optionally, enter a name for the scroll zone in the Name field. This name displays in the Interactive Objects area in the bottom of the palette.
- If you want the scroll zone to be initially invisible, check Initially Hidden .
- Choose whether you want to create a layout or link to an exising layout.
- If you want to create a new layout to serve as the scrollable layout, click Create Layout , enter a name for the layout in the Name field, and enter the height of the scrollable layout in the Height field.
- If you want to use an existing layout in the active project as the scrollable layout, click Link Layout and choose that layout's name from the Layout drop-down menu. The size of the selected box is adjusted to fit the layout.
- Click Next . The HTML5 palette displays the following controls.
Scroll zone layout controls in HTML5 palette
- To provide scrollbars as a visual cue that the area is scrollable, check Show ScrollBar .
- To automatically display arrows that indicate the direction in which the scroll zone can be scrolled, check Automatic Arrows .
- To edit the scrollable layout, click the Edit button under Layout Reference .
- To finish configuring the scroll zone, click a different object or a blank part of the layout.
Download a demo here: scrollzone.zip