Scroll events

These are the events emitted by a ScrollComponent.

Basic scroll events

There are onScrollStart and onScrollEnd to signal the beginning and end of a scroll action, and between these two, onScroll will be called continuously.

Here’s a simple prototype that prints text in the console when these events are called:

scroll.onScrollStart ->
    print "Scroll started."
scroll.onScroll ->
    print "Scrolling # points."
scroll.onScrollEnd ->
    print "Scroll ended."

Scroll animation events

The content doesn’t stop moving when the user stops scrolling.

Instead, it will keep scrolling for a moment depending on how much velocity it received from the user‘s swipe (‘momentum’), or it might bounce back because it was dragged over the threshold (‘bounce’).

The onScrollAnimationDidStart event triggers immediately after onScrollEnd to signal when these animations started.

onScrollAnimationDidEnd will trigger when the layer came to a complete standstill.

A simple example:

scroll.onScrollAnimationDidStart ->
    print "Momentum or bounce animation started."
scroll.onScrollAnimationDidEnd ->
    print "The scrolled content stopped completely."

Is something moving?

The onMove event will fire whenever the content moves, including when it is because of a momentum or bounce animation.

An example:

scroll.onMove ->
    print "Content moved # points."

Example uses

A typical use of the scrolling events is to have a navigation bar move or disappear when the content scrolls up.

First example: Moving a navigation bar

Here the navigation bar will follow the content when it has scrolled more than 44 points (the height of the nav bar) upward.

# move the nav bar up together with the content
scroll.onMove ->
    if scroll.scrollY > 44
        navigationBar.y = scroll.content.y - 16
    else
        navigationBar.y = 20

Note that we look at scroll.scrollY to see how far we scrolled, but use scroll.content.y to set the position of the nav bar.

Pro tip: Two kinds of properties give the scrolling distance, one kind goes up, the other kind counts down.

1. scroll.scrollY and scroll.scrollX
   How far did we scroll? (Starts at zero and increases.)
2. scroll.content.y and scroll.content.x
   Where’s the content now? (Starts at zero and decreases.)

Second example: Fading out a navigation bar

With ? Modulate you can convert one value to something else.

Here we map any value of scroll.scrollY between 0 and 44 to a new value for navigationBar.opacity between 1 and 0.

When the scroll distance is 0, the opacity of the navigation bar will be set to 1. When the scroll distance is 44, that opacity will be set to 0. All other values will be mapped between these two.

# fade out the nav bar when the content moves up
scroll.onMove ->
    navigationBar.opacity = Utils.modulate scroll.scrollY, [0, 44], [1, 0]

Overview of the scroll events