These are the events emitted by a ScrollComponent.
onScrollEnd to signal the beginning and end of a scroll action, and between these two,
onScroll will be called continuously.
|Basic scroll events|
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."
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’).
|Scroll animation events|
|Start of momentum or bounce animation.|
|End of momentum or bounce animation.|
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."
onMove event will fire whenever the content moves, including when it is because of a momentum or bounce animation.
|The content is moving (includes momentum or bounce animation).|
scroll.onMove -> print "Content moved # points."
A typical use of the scrolling events is to have a navigation bar move or disappear when the content scrolls up.
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.
How far did we scroll? (Starts at zero and increases.)
Where’s the content now? (Starts at zero and decreases.)
With 🛠 Modulate you can convert one value to something else.
Here we map any value of
44 to a new value for
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]