Scroll View

A container that makes its children scrollable.

Inputs

Dimensions

Width
The width, specified in pixels or percent. When specified in percent the width is in relation to the parent.

Height
The height, specified in pixels or percent. When specified in percent the height is in relation to the parent.

Placement

Align X
How to align the object in relation to its parent

Align Y
How to align the object in relation to its parent

Position X
The position on the horizontal axis in relation to its parent, specified in pixels

Position Y
The position on the vertical axis in relation to its parent, specified in pixels

Position Z
The position on the depth axis, interpreted in an unit with similar size as pixels

Scroll Behavior

Scroll Duration
The duration of the scroll when the user ends a drag with a non-zero velocity. Specified in milliseconds

Snap
Snap to the bounds of a child when the user stops dragging

  • Disabled - No snapping
  • Item - Snap to the closest item when the scroll is finished
  • Every Item - Snap to the next or previous item. Stops the user from scrolling more than one item at a time

Scroll Direction
The direction of the scroll and layout of child nodes

Start Position
The start offset of the children of a Scroll View

Scroll Enabled
Enable or disable scrolling

Overscroll Enabled
Enable or disable the "rubber band" effect when the start or end of the scroll content is reached

Scroll Threshold
How many pixels the user must drag before the content starts scrolling

Appearance

Opacity
Set the opacity from 0 to 1. Values over 1 are allowed and will increase the value of the red, green and blue channels.

Visible
Enables or disables to visibility of the object.

Clip
Clip the children to the bounds of the Scroll View

Other

Ignore Touch
Disables touch on this objects. Makes it invisible to touch and touch will pass through to objects underneath

Block Touch
By default touch events will pass through an object and interact with objects underneath. By setting Block Touch to Yes no touch events will pass through

Depth
What depth layer to draw this object to. All objects default to layer 0. Higher layers will be drawn on top of lower layers

Transform

Scale X
Scales the object on the horizontal axis

Scale Y
Scales the object on the vertical axis

Rotation X
Rotates the object around the horizontal axis, making it rotate in 3D. Specified in degrees

Rotation Y
Rotates the object around the vertical axis, making it rotate in 3D. Specified in degrees

Rotation Z
Rotates the object around the depth axis, a standard 2D rotation. Specified in degrees

Pivot X
Controls the rotation pivot point. Can be specified in either % where 0% is on the left edge on the object, 50% is in the middle and 100% is on the right edge. Can also be specified in pixels

Pivot Y
Controls the rotation pivot point. Can be specified in either % where 0% is on the top edge on the object, 50% is in the middle and 100% is on the lower edge. Can also be specified in pixels

Pivot Z
Controls the rotation pivot point. Specified in pixels

Scroll To Position

An action for scrolling to a specified position

Position
The position to scroll to

Scroll Duration
The duration of the scroll. Specified in milliseconds.

Do
Start the scroll to position action

Scroll To Index

An action for scrolling to a specified child index

Index
Thechild index to scroll to. Starts at 0

Scroll Duration
The duration of the scroll. Specified in milliseconds.

Do
Start the scroll to index action

Outputs

Other

This
A reference to this node. Used to connect to Drag nodes, custom Javascript nodes and more.

Child Index
The place this node has in relation to its parent. E.g. if a Group have three children, then the first child will have Child Index 0, the second child will have Child Index 1, and so on.

Scroll Position
The current position of the scrolling. How far the items are offset from their start position.

Index
The index of the top or left-most item in the Scroll View

Child count
The number of children in this Scroll View

Touch

Tap
Emits a signal when the user presses and release on this object

Press
Emits a signal when the user presses inside the bounds of this object

Release
Emits a signal when the user releases touch inside the bounds of this object

Enter
Emits a signal when the user presses or moves from outside to inside the bounds this object

Exit
Emits a signal when the user releases or moves from inside to outside the bounds of this object

Move
Emits a signal when the user changes position inside the bounds of this object

Signals

Drag Started
Emitted when the users starts scrolling

Drag Ended
Emitted when the user stops scrolling

Index Changed
Signals when the currently scrolled to child index changes. See the Index output above

Position

Position X
The horizontal position of this object in relation to its parent

Position Y
The vertical position of this object in relation to its parent

Screen Position X
Where this object is on the screen, in pixels

Screen Position Y
Where this object is on the screen, in pixels

Dimensions

Width
Current width of this object

Height
Current height of this object

Sign up to noodl newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.