Scroll

A Scroll layer is an interactive layer that contains scrollable content. In the Preview window, a user can scroll the content according to the properties you define.

To create a Scroll, click the Scroll tool in the Toolbar, then click and drag on the canvas to draw the Scroll layer.

Content

To use a Scroll, you must also connect it to a second layer that the Scroll will display as its scrollable content.

Tip: You can think of a Scroll as a window through which a user can scroll the Scroll's content layer.

To connect a selected Scroll to its content, click on the Connector on the right edge of the Scroll, then click on the layer that you would like the Scroll to use as its content.

Property Controls

Direction

The Direction property controls whether a Scroll will move left and right or up and down—or both.

Tip: In most cases, a Scroll content layer will be larger than the Scroll layer itself. A vertical Scroll's content will be taller than the Scroll, while a horizontal Scroll's content will be wider.

Lock

The Lock property controls whether the Scroll should ignore dragging in its opposite direction while scrolling.

When set to 1 Axis, the Scroll will ignore dragging along in its opposite direction once the user has begun scrolling.

Tip: This property is useful when the Scroll's pages contain their own Scroll or Page layers. For example, when a vertical Scroll's content contains a horizontal Page.

Drag scroll

The Drag Scroll property controls whether the Scroll should respond to drag interactions.

When the Dragging property is set to On, a user will be able to scroll the Scroll's content in the Preview by clicking and dragging.

Wheel scroll

The Dragging property controls whether the Scroll should respond to scroll interactions.

When the Wheel Scroll property is set to On, a user will be able to scroll the Scroll's content in the Preview with their device's standard scroll gesture.

Content

The Content property displays the Scroll's connected content layer.

In addition to using the Connector method described above, you can choose the Scroll's content layer in the Content property's dropdown.