Basic use

You create a ScrollComponent using new, give it the desired size (in mobile apps, often the whole screen), and then add stuff to its content layer.

Let’s start with one that has the iPhone 8’s screen dimensions:

# Create the ScrollComponent
scroll = new ScrollComponent
    width: 375, height: 667
    point: Align.center
    borderColor: "gray", borderWidth: 1

I named it scroll, gave it a gray border to make it visible, and centered it on the screen.

You place layers inside the ScrollComponent simply by making scroll.content their parent.

# Add the content layers
layerA = new Layer
    width: 341, height: 200, borderRadius: 10
    backgroundColor: "#7DDD11"
    parent: scroll.content
    x: 16
layerB = new Layer
    width: 341, height: 200, borderRadius: 10
    backgroundColor: "#7DDD11"
    parent: scroll.content
    x: 16
    y: layerA.maxY + 16
...

I used the first layer’s maxY property to position the second one 16 points underneath it (and did the same for consecutive layers).

A basic ScrollComponent

The size of all the scrollable content combined is calculated automatically.

Just as with draggable layers (which are being used to construct all this) you can restrict the scrolling direction.

scroll.scrollHorizontal = no
scroll.scrollVertical = yes

But you can, of course, also set this when creating the ScrollComponent:

# Create the ScrollComponent
scroll = new ScrollComponent
    width: 375, height: 667
    point: Align.center
    borderColor: "gray", borderWidth: 1
    scrollHorizontal: no

A ScrollComponent with only vertical scrolling