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 Builder, in the Inspector 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 elements 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.

例

• 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.

その他の参考資料

• ListView