UXML element ScrollView

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.

Manage the scroll bar visibility

You can specify the direction 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 direction of the scroll bar movement in UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary 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:

• Vertical (default)
• Horizontal
• Vertical and Horizontal

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:

• Auto (default)
• Always Visible
• Hidden

Control the scroll speed

To control the scroll speed of the ScrollView, override the USS built-in variable --unity-metrics-single_line-height. The default value is 18px. For example:

:root {
--unity-metrics-single_line-height: 500px;
}

Important: When you use CloneTree() without parameter or Instantiate(), it adds a TemplateContainer that stops the line height from propagating. Use CloneTree(root) instead.

Wrap elements inside ScrollView

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;

Wrap text of elements inside ScrollView

To wrap the text of an element inside a ScrollView, for example, the text of a Label element, do the following:

1. Style the Label element with any of the following methods:
   • In UI Builder, in the Inspector window of the Label, select Text > Wrap > normal.
   • Apply style white-space: normal; to the Label element in USS, UXML, or C#.
2. Create a VisualElement as a container inside the ScrollView. The original container element inside the ScrollView does not have bounds set (is infinite in size), so text won’t properly wrap. This container VisualElement provides the finite size for text to wrap within.
3. Add the Label to the VisualElement container.

Examples

• Wrap content inside a ScrollView: This example demonstrates how to use styles to wrap content inside a scroll view.

C# class and namespace

C# class: ScrollView
Namespace: UnityEngine.UIElements
Base class: VisualElement

Member UXML attributes

This element has the following member attributes:

Inherited UXML attributes

This element inherits the following attributes from its base class:

This element also inherits the following attributes from VisualElement:

USS classes

The following table lists all the C# public property names and their related USS selector.

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.

Additional resources

• ListView