ScrollView displays its content inside a scrollable area. When you add content to a ScrollView, the content is added to the content container (#unity-content-container
) of the ScrollView.
You can create a ScrollView with UI Builder, UXML, or C#. The following C# example creates a ScrollView with both horizontal and vertical scroll capabilities, that contains a title Label, and a number of Toggle elements. It also adds a button that, when clicked, scrolls the list down by one page using the vertical scroller.
// Create a ScrollView with vertical and horizontal scrolling enabled
// and set its width and height.
var scrollView = new ScrollView(ScrollViewMode.VerticalAndHorizontal);
scrollView.style.width = 250;
scrollView.style.height = 400;
// Add a label and 100 toggle elements to the ScrollView.
scrollView.Add(new Label("List of checkboxes:"));
for (int i = 0; i < 100; ++i)
{
var toggle = new UnityEngine.UIElements.Toggle()
{ text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." };
scrollView.Add(toggle);
}
// Access the vertical scroller.
var verticalScroller = scrollView.verticalScroller;
// Add a button to scroll down one page when clicked.
var scrollDownButton = new Button(() =>
{
verticalScroller.ScrollPageDown(50f);
})
{ text = "Scroll Down One Page" };
uiDocument.rootVisualElement.Add(scrollView);
uiDocument.rootVisualElement.Add(scrollDownButton);
You can specify the scroll mode of the scroll bar movement, whether the horizontal or vertical scroll bars are visible, and control the speed of the scroll bars.
To set the scroll mode of the scroll bar movement in UI Builder, in the InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
See in Glossary window of the ScrollView, select one of the following options for Mode:
To set the visibility of the scroll bar in UI Builder, in the Inspector window of the ScrollView, select one of the following options for Horizontal Scroller Visibility or Vertical Scroller Visibility:
To control the scroll speed, adjust the values of the following properties in UI Builder, UXML, or C# code. The higher the value, the faster the scrolling speed.
horizontal-page-size
controls the speed of horizontal scrolling when using a keyboard or the on-screen scrollbar buttons (arrows and handle). The speed is calculated by multiplying the page size by the specified value. For example, a value of 2
means that each scroll movement covers a distance equal to twice the width of the page.vertical-page-size
controls the speed of vertical scrolling when using a keyboard or the on-screen scrollbar buttons (arrows and handle). The speed is calculated by multiplying the page size by the specified value. For example, a value of 2
means that each scroll movement covers a distance equal to twice the length of the page.mouse-wheel-scroll-size
controls the speed of scrolling when using the mouse wheel. The speed is calculated by dividing the specified value by 18
, which corresponds to the default line height of 18px
. For example, if you set the value to 36
, each scroll movement covers a distance equivalent to two lines of content.
Note: You can also override the USS built-in variable –unity-metrics-single_line-height
to control the speed of scrolling when using the mouse wheel. The mouse-wheel-scroll-size
attribute takes precedence over the –unity-metrics-single_line-height
USS variable.
To scroll to the end of a ScrollView, set the scrollOffset property to the maximum value of the vertical scroller. This scrolls the content to the end when you initialize the UI.
// Set the scroll offset to the bottom of the ScrollView.
// This scrolls to the bottom when the UI is initialized.
scrollView.scrollOffset = new Vector2(0, scrollView.verticalScroller.highValue);
You can wrap visual elementsA node of a visual tree that instantiates or derives from the C# VisualElement
class. You can style the look, define the behaviour, and display it on screen as part of the UI. More info
See in Glossary inside a ScrollView so that the elements display in a row. If the row is full, the elements continue to display on the next line.
To wrap visual elements inside a ScrollView, set the ScrollView’s content container flex-direction
to row
and flex-wrap
to wrap
.
In USS:
.unity-scroll-view__content-container {
flex-direction: row;
flex-wrap: wrap;
}
In C#:
scrollview.contentContainer.style.flexDirection = FlexDirection.Row;
scrollview.contentContainer.style.flexWrap = Wrap.Wrap;
To wrap the text of an element inside a ScrollView, for example, the text of a Label element, do the following:
white-space: normal;
to the Label element in USS, UXML, or C#.
C# class: ScrollView
Namespace: UnityEngine.UIElements
Base class: VisualElement
This element has the following member attributes:
Name | Type | Description |
---|---|---|
elastic-animation-interval-ms |
long |
The minimum amount of time, in milliseconds, between executions of elastic spring animation. |
elasticity |
float |
The amount of elasticity to use when a user tries to scroll past the boundaries of the scroll view. Elasticity is only used when touchScrollBehavior is set to Elastic. |
horizontal-page-size |
float |
This property controls the speed of the horizontal scrolling when using a keyboard or the on-screen scrollbar buttons (arrows and handle), based on the size of the page. When scrolling, the page size is applied to the offset for each scroll step, so the final offset will be the page size multiplied by the number of steps.\ |
horizontal-scroller-visibility |
UIElements.ScrollerVisibility |
Specifies whether the horizontal scroll bar is visible. |
mode |
UIElements.ScrollViewMode |
Controls how the ScrollView allows the user to scroll the contents. ScrollViewMode The default is ScrollViewMode.Vertical . Writing to this property modifies the class list of the ScrollView according to the specified value of ScrollViewMode . When the value changes, the class list matching the old value is removed and the class list matching the new value is added. |
mouse-wheel-scroll-size |
float |
This property controls the scrolling speed only when using a mouse scroll wheel, based on the size of the page. This property takes precedence over the --unity-metrics-single_line-height USS variable. If both the property and the variable are set, the property value is used.The following example demonstrates how to use the mouseWheelScrollSize property to control the “speed” of a scroll when using the mouse wheel. Notice the difference in feel when selecting different values: |
nested-interaction-kind |
UIElements.ScrollView+NestedInteractionKind |
The behavior to use when scrolling reaches limits of a nested ScrollView . |
scroll-deceleration-rate |
float |
Controls the rate at which the scrolling movement slows after a user scrolls using a touch interaction. The deceleration rate is the speed reduction per second. A value of 0.5 halves the speed each second. A value of 0 stops the scrolling immediately. |
show-horizontal-scroller |
boolean |
Obsolete. Use ScrollView.horizontalScrollerVisibility instead. |
show-vertical-scroller |
boolean |
Obsolete. Use ScrollView.verticalScrollerVisibility instead. |
touch-scroll-type |
UIElements.ScrollView+TouchScrollBehavior |
The behavior to use when a user tries to scroll past the boundaries of the ScrollView content using a touch interaction. |
vertical-page-size |
float |
This property controls the speed of the vertical scrolling when using a keyboard or the on-screen scrollbar buttons (arrows and handle), based on the size of the page. The speed is calculated by multiplying the page size by the specified value. For example, a value of 2 means that each scroll movement covers a distance equal to twice the width of the page.\ |
vertical-scroller-visibility |
UIElements.ScrollerVisibility |
Specifies whether the vertical scroll bar is visible. |
This element inherits the following attributes from its base class:
Name | Type | Description |
---|---|---|
focusable |
boolean |
If false, this prevents the element from being focused. The element can only be focused if its canGrabFocus property is true. |
tabindex |
int |
An integer used to sort focusable elements in the focus ring. Must be greater than or equal to zero. Setting the tabIndex value to less than 0 (for example, −1 ) removes the element from the focus ring and tab navigation. |
This element also inherits the following attributes from VisualElement
:
Name | Type | Description |
---|---|---|
content-container |
string |
Logical container where child elements are added. If a child is added to this element, the child is added to this element’s content container instead. When iterating over the VisualElement.Children of an element, the element’s content container hierarchy is used instead of the element itself. This can lead to unexpected results, such as elements being ignored by the navigation events if they are not directly in the content container’s hierarchy. Refer to IFocusRing for more information.If the content container is the same as the element itself, child elements are added directly to the element. This is true for most elements but can be overridden by more complex types. The ScrollView , for example, has a content container that is different from itself. In that case, child elements added to the scroll view are added to its content container element instead. While the physical parent (VisualElement.Hierarchy.parent ) of the child elements is the scroll view’s content container element, their logical parent (VisualElement.parent ) still refers to the scroll view itself. Since some of the scroll view’s focusable children are not part of its logical hierarchy, like its Scroller elements, these focusable children are not considered by default when using sequential navigation. Refer to How can I change what element is focused next for an example of a workaround solution if the default navigation rules don’t correspond to your needs. |
data-source |
Object |
Assigns a data source to this VisualElement which overrides any inherited data source. This data source is inherited by all children. |
data-source-path |
string |
Path from the data source to the value. |
data-source-type |
System.Type |
The possible type of data source assignable to this VisualElement. This information is only used by the UI Builder as a hint to provide some completion to the data source path field when the effective data source cannot be specified at design time. |
enabled |
boolean |
Returns true if the VisualElement is enabled locally.This flag isn’t changed if the VisualElement is disabled implicitly by one of its parents. To verify this, use enabledInHierarchy . |
language-direction |
UIElements.LanguageDirection |
Indicates the directionality of the element’s text. The value will propagate to the element’s children. Setting languageDirection to RTL can only get the basic RTL support like text reversal. To get more comprehensive RTL support, such as line breaking, word wrapping, or text shaping, you must enable Advance Text Generator. |
name |
string |
The name of this VisualElement. Use this property to write USS selectors that target a specific element. The standard practice is to give an element a unique name. |
picking-mode |
UIElements.PickingMode |
Determines if this element can be the target of pointer events or picked by IPanel.Pick queries.Elements can not be picked if: - They are invisible- Their style.display is set to DisplayStyle.None Elements with a picking mode of PickingMode.Ignore never receive the hover pseudo-state. |
style |
string |
Sets the style values on a VisualElement .The returned style data, computed from USS files or inline styles written to this object in C#, doesn’t represent the fully resolved styles, such as the final height and width of a VisualElement. To access these fully resolved styles, use resolvedStyle .For information about how to use this property and all the supported USS properties, refer to the Apply styles in C# scripts and USS properties reference manual pages. |
tooltip |
string |
Text to display inside an information box after the user hovers the element for a small amount of time. This is only supported in the Editor UI. |
usage-hints |
UIElements.UsageHints |
A combination of hint values that specify high-level intended usage patterns for the VisualElement . This property can only be set when the VisualElement is not yet part of a Panel . Once part of a Panel , this property becomes effectively read-only, and attempts to change it will throw an exception. The specification of proper UsageHints drives the system to make better decisions on how to process or accelerate certain operations based on the anticipated usage pattern. Note that those hints do not affect behavioral or visual results, but only affect the overall performance of the panel and the elements within. It’s advised to always consider specifying the proper UsageHints , but keep in mind that some UsageHints might be internally ignored under certain conditions (e.g. due to hardware limitations on the target platform). |
view-data-key |
string |
Used for view data persistence, such as tree expanded states, scroll position, or zoom level. This key is used to save and load the view data from the view data store. If you don’t set this key, the persistence is disabled for the associated VisualElement . For more information, refer to View data persistence in the Unity Manual. |
The following table lists all the C# public property names and their related USS selector.
C# property | USS selector | Description |
---|---|---|
ussClassName |
.unity-scroll-view |
USS class name of elements of this type. |
viewportUssClassName |
.unity-scroll-view__content-viewport |
USS class name of viewport elements in elements of this type. |
horizontalVariantViewportUssClassName |
.unity-scroll-view__content-viewport--horizontal |
USS class name that’s added when the Viewport is in horizontal mode. ScrollViewMode.Horizontal
|
verticalVariantViewportUssClassName |
.unity-scroll-view__content-viewport--vertical |
USS class name that’s added when the Viewport is in vertical mode. ScrollViewMode.Vertical
|
verticalHorizontalVariantViewportUssClassName |
.unity-scroll-view__content-viewport--vertical-horizontal |
USS class name that’s added when the Viewport is in both horizontal and vertical mode. ScrollViewMode.VerticalAndHorizontal
|
contentAndVerticalScrollUssClassName |
.unity-scroll-view__content-and-vertical-scroll-container |
USS class name of content elements in elements of this type. |
contentUssClassName |
.unity-scroll-view__content-container |
USS class name of content elements in elements of this type. |
horizontalVariantContentUssClassName |
.unity-scroll-view__content-container--horizontal |
USS class name that’s added when the ContentContainer is in horizontal mode. ScrollViewMode.Horizontal
|
verticalVariantContentUssClassName |
.unity-scroll-view__content-container--vertical |
USS class name that’s added when the ContentContainer is in vertical mode. ScrollViewMode.Vertical
|
verticalHorizontalVariantContentUssClassName |
.unity-scroll-view__content-container--vertical-horizontal |
USS class name that’s added when the ContentContainer is in both horizontal and vertical mode. ScrollViewMode.VerticalAndHorizontal
|
hScrollerUssClassName |
.unity-scroll-view__horizontal-scroller |
USS class name of horizontal scrollers in elements of this type. |
vScrollerUssClassName |
.unity-scroll-view__vertical-scroller |
USS class name of vertical scrollers in elements of this type. |
horizontalVariantUssClassName |
.unity-scroll-view--horizontal |
USS class name that’s added when the ScrollView is in horizontal mode. ScrollViewMode.Horizontal
|
verticalVariantUssClassName |
.unity-scroll-view--vertical |
USS class name that’s added when the ScrollView is in vertical mode. ScrollViewMode.Vertical
|
verticalHorizontalVariantUssClassName |
.unity-scroll-view--vertical-horizontal |
USS class name that’s added when the ScrollView is in both horizontal and vertical mode. ScrollViewMode.VerticalAndHorizontal
|
scrollVariantUssClassName |
.unity-scroll-view--scroll |
|
disabledUssClassName |
.unity-disabled |
USS class name of local disabled elements. |
You can also use the Matching Selectors section in the Inspector or the UI Toolkit Debugger to see which USS selectors affect the components of the VisualElement
at every level of its hierarchy.