Scroll Rect
A Scroll Rect can be used when content that takes up a lot of space needs to be displayed in a small area. The Scroll Rect provides functionality to scroll over this content.
Usually a Scroll Rect is combined with a Mask in order to create a scroll view, where only the scrollable content inside the Scroll Rect is visible. It can also additionally be combined with one or two Scrollbars that can be dragged to scroll horizontally or vertically.
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. |
Events
| Property: | Function: |
|---|---|
| On Value Changed | A UnityEvent that is invoked when the scroll position of the Scroll Rect changes. The event can send the current scroll position as a Vector2 type dynamic argument. |
Details
In the Hierarchy, things should be arranged like this: The Rect Transform with the Scroll Rect on it also has a Mask component on it. In the image below this object is called ScrollView.
As a child to the ScrollView should be a single Rect Transform that functions as a parent to all the scrollable content. In the image below this object is called Content. All the scrollable UI elements should be children of this Content object. The Content object should also be dragged into the Content property of the Scroll Rect component.
Optionally, the Scroll Rect can be linked to a horizontal and/or a vertical Scrollbar. These are typically placed in the hierarchy as siblings to the scroll view, and when present, should be dragged into the Horizontal Scrollbar and Vertical Scrollbar properties of the Scroll Rect, respectively. Note that the Direction property on such a horizontal Scrollbar should be set to Left To Right, and on the vertical Scrollbar to Bottom To Top.
To scroll content, the input must be received from inside the bounds of the ScrollRect, not on the content itself.
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.
Hints
- The pivot and anchors of the content RectTransform can be used to determine how the content is aligned inside the scroll view if the content grows or shrinks. If the content should stay aligned with the top, set the anchors to the top of the parent, and set the pivot to the top position.
- See the page Making UI elements fit the size of their content for information about how to make the content Rect Transform automatically resize to fit the content.