Scroll Rect
The Scroll Rect is a UI Element that allows the user to move another UI Element along the horizontal and/or vertical axes.
Properties
| Property: | Function: |
|---|---|
| Content | This is a reference to the RecTransform of the UI element to be scrolled, for example a large image. |
| Horizontal | Enables horizontal scrolling |
| Vertical | Enables vertical scrolling |
| Movement Type | Unrestricted, Elastic or Clamped. Use Elastic or Clamped to force the content to remain within the bounds of the Scroll Rect. Elastic mode bounces the content when it reaches the edge of the Scroll Rect |
| Elasticity | This is the amount of bounce used in the elasticity mode. |
| Inertia | When Inertia is set the content will continue to move when the pointer is released after a drag. When Inertia is not set the content will only move when dragged. |
| Deceleration Rate | When Inertia is set the deceleration rate determines how quickly the contents stop moving. A rate of 0 will stop the movement immediately. A value of 1 means the movement will never slow down. |
| Scroll Sensitivity | The sensitivity to scroll wheel and track pad scroll events. |
| Horizontal Scrollbar | Optional reference to a horizontal scrollbar element. |
| Vertical Scrollbar | Optional reference to a vertical scrollbar element. |
Description
A Scroll Rect is usually used to scroll a large image or panel of another UI element, such as a list of buttons or large block of text. The Scroll Rect is most often used with a mask element, and is designed to work seamlessly with scrollbars.
To scroll content, the input must be received from inside the bounds of the ScrollRect, not on the content itself.
The Scroll Rect is commonly used with a mask element. Add an image script for the mask to use, and then add a mask script. The mask elements will use the image to create its mask. A specific image is not needed on the image script, but one can be added for additional control over the shape of the mask.
Take care when using Unrestricted scrolling movement as it is possible to lose control of the content in an irretrievable way. When using Elastic or Constrained movement it is best to position the content so that it starts within the bounds of the ScrollRect, or undesirable behaviour may occur as the RectTransform tries to bring the content back within its bounds.