Automatic scrolling

When a screen is bigger than the FlowComponent, it will automatically be made scrollable.

Vertical scrolling

In this example, the second screen, screenB, is twice the screen height.

screenB = new Layer
    width: Screen.width
    height: Screen.height * 2   # = twice the height
    backgroundColor: "#fff"

Just before the transition to screenB you can see a ScrollComponent named scroll (with its content layer) appear in Layer Panel. It’s created on the fly.

(By the way, we’ll talk about that mysterious overlay layer in Overlays.)

Horizontal scrolling

Automatic scrolling also works horizontally. When the screen is wider than the FlowComponent, it will also be made scrollable.

screenB = new Layer
    width: Screen.width * 2     # = twice the width
    height: Screen.height
    backgroundColor: "#fff"

And, of course, a screen that’s higher and wider than the FlowComponent will be scrollable in all directions.

A pixel is enough

Even when the screen is just a tiny bit too big, it will be made scrollable.

Let’s see what happens if we make the first screen half a point higher:

# Adding a pixel to the layer’s height
screenA.height += 0.5

But when a layer is only a pixel too high, it probably happened by accident.

So, fortunately, you can disable scrolling with scroll, another argument (like animate) that you can add. Set scroll to no to switch it off.

flow.showNext screenA,
    scroll: no

Changing scroll properties

The FlowComponent creates a normal, everyday ScrollComponent that you can customize. You can find it in flow.scroll.

“But which one?” you might ask, because you can have several scrollable screens moving in and out.

Well, the currently visible one. That’s why it’s best to configure scroll right after using showNext().

Here’s an example in which I add some content inset, and enable mouse wheel scrolling.

screenA.onTap ->
    flow.showNext screenB
    flow.scroll.contentInset =
        top: 60
        bottom: 60
    flow.scroll.mouseWheelEnabled = yes

This last example begs the question: “How do I get rid of that black abyss behind the scrollable content?”

That’s the background color of the FlowComponent, and you can set it when creating the component. To white, for instance:

flow = new FlowComponent
    backgroundColor: "white"

(There’s more about setting FlowComponent properties in Tips and tricks.)

Listening to a screen’s scroll events

Same thing when using scroll events: it’s best to add them right after the showNext(). Because at that point scroll will refer to the ScrollComponent that was just created.

See this example. Directly after the showNext() to the liked artboard we add an onScroll event to flow.scroll.

# Switch to Liked screen
button_liked.onTap ->
    flow.showNext liked,
        animate: no
    # Move the tab bar up or down
    # depending on the scroll direction
    flow.scroll.onScroll ->
        if event.velocity.y < 0
            tabbar.animate
                y: Screen.height
        else
            tabbar.animate
                y: flow.footer.initial_y

In this event handler, we lower the tabbar when scrolling up, and bring it back up when scrolling down (by checking if the vertical layer.velocity is positive or negative).

Result: The tab bar lowers when you scroll the Liked screen, but not when you scroll the Messages screen.

(By the way, we use animate: no when transitioning between the screens. Because that’s how a tab bar works—it instantly switches to the new screen.)

Listening to ALL scroll events

You can also add scroll events directly to the FlowComponent. In this case, they will react to all scroll gestures, independently of which screen is visible.

In this next example, the onScroll event is added to flow itself, at the end of the project.

# Move the tab bar up or down
# depending on the scroll direction
flow.onScroll ->
    if event.velocity.y < 0
        tabbar.animate
            y: Screen.height
    else
        tabbar.animate
            y: flow.footer.initial_y

Now the tab bar will always move down when you scroll, on every scrollable screen.