Changing the scroll behavior

Just as with a draggable layer, you can tweak the overdag, momentum and bounce simulated physics.

You’ll have to apply these changes to the content child layer, though, since that’s the one that’s being dragged around.

Disabling overdrag will prevent the content from scrolling past the beginning or end:

# disabling overdrag
scroll.content.draggable.overdrag = no

A ScrollComponent with overdrag disabled

Adjusting the bounce: In this example the content appears to stick to the borders as if they were magnetic.

# changing the bounce options
scroll.content.draggable.bounceOptions =
    tension: 500,
    friction: 10,
    tolerance: 1

A ScrollComponent with adjusted bounce settings

To disable bounce:

scroll.content.draggable.bounce = no

You can also change the values for momentum, or even disable it completely. I would advise against changing the momentum settings, though, because it makes the scrolling feel unnatural.

# Change the friction of momentum
scroll.content.draggable.momentumOptions =
    friction: 15

Here’s how you disable momentum:

# Disable momentum
scroll.content.draggable.momentum = no

A ScrollComponent with adjusted momentum settings