ScrollView
UnityEngine.UIElements.ScrollView
読み終わるまでの所要時間 4 分最終更新 1ヶ月前
ScrollView displays its content inside a scrollable area. When you add content to a ScrollView, the content is added to the content container () of the ScrollView.
#unity-content-containerCreate a 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);
Manage the scroll bar
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.
Scroll bar mode and visibility
To set the scroll mode 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, adjust the values of the following properties in UI Builder, UXML, or C# code. The higher the value, the faster the scrolling speed.
- 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
horizontal-page-sizemeans that each scroll movement covers a distance equal to twice the width of the page.2 - 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
vertical-page-sizemeans that each scroll movement covers a distance equal to twice the length of the page.2 - controls the speed of scrolling when using the mouse wheel. The speed is calculated by dividing the specified value by
mouse-wheel-scroll-size, which corresponds to the default line height of18. For example, if you set the value to18px, each scroll movement covers a distance equivalent to two lines of content.36
注
You can also override the USS built-in variable to control the speed of scrolling when using the mouse wheel. The attribute takes precedence over the USS variable.
–unity-metrics-single_line-heightmouse-wheel-scroll-size–unity-metrics-single_line-heightScroll to the end
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);
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 to and to .
flex-directionrowflex-wrapwrapIn 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:
-
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 to the Label element in USS, UXML, or C#.
white-space: normal;
-
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.
-
Add the Label to the VisualElement container.
Apply styles to the direct child of a ScrollView
When you add elements to a ScrollView, they're added under a child element of the ScrollView that acts as a container. To add a style to this container, do this in USS:
ScrollView > .unity-scroll-view__content-container { margin: 10px;}
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:
ScrollViewNamespace:
UnityEngine.UIElementsBase class:
VisualElementMember UXML attributes
This element has the following member attributes:
Name | Type | Description |
|---|---|---|
| | The minimum amount of time, in milliseconds, between executions of elastic spring animation. |
| | The amount of elasticity to use when a user tries to scroll past the boundaries of the scroll view. Elasticity is only used when |
| | 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.\ |
| | Specifies whether the horizontal scroll bar is visible. |
| | Controls how the ScrollView allows the user to scroll the contents. The default is |
| | 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 The following example demonstrates how to use the |
| | The behavior to use when scrolling reaches limits of a nested |
| | 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. |
| | Obsolete. Use |
| | Obsolete. Use |
| | The behavior to use when a user tries to scroll past the boundaries of the ScrollView content using a touch interaction. |
| | 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 |
| | Specifies whether the vertical scroll bar is visible. |
Inherited UXML attributes
This element inherits the following attributes from its base class:
Name | Type | Description |
|---|---|---|
| | Whether an element can potentially receive focus. If false, the element can't receive focus. If true, the element receives focus only when its |
| | An integer used to sort focusable elements in the focus ring. Must be greater than or equal to zero. Setting the |
This element also inherits the following attributes from :
VisualElementName | Type | Description |
|---|---|---|
| | 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 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 |
| | Assigns a data source to this VisualElement which overrides any inherited data source. This data source is inherited by all children. |
| | Path from the data source to the value. |
| | 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. |
| | Returns true if the This flag isn't changed if the VisualElement is disabled implicitly by one of its parents. To verify this, use |
| | Indicates the directionality of the element's text. The value will propagate to the element's children. |
| | 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. |
| | Determines if this element can be the target of pointer events or picked by Elements can not be picked if: - They are invisible- Their Elements with a picking mode of |
| | Sets the style values on a 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 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. |
| | 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. |
| | A combination of hint values that specify high-level intended usage patterns for the |
| | 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 |
USS classes
The following table lists all the C# public property names and their related USS selector.
C# property | USS selector | Description |
|---|---|---|
| | USS class name of elements of this type. |
| | USS class name of viewport elements in elements of this type. |
| | USS class name that's added when the Viewport is in horizontal mode. |
| | USS class name that's added when the Viewport is in vertical mode. |
| | USS class name that's added when the Viewport is in both horizontal and vertical mode. |
| | USS class name of content elements in elements of this type. |
| | USS class name of content elements in elements of this type. |
| | USS class name that's added when the ContentContainer is in horizontal mode. |
| | USS class name that's added when the ContentContainer is in vertical mode. |
| | USS class name that's added when the ContentContainer is in both horizontal and vertical mode. |
| | USS class name of horizontal scrollers in elements of this type. |
| | USS class name of vertical scrollers in elements of this type. |
| | USS class name that's added when the ScrollView is in horizontal mode. |
| | USS class name that's added when the ScrollView is in vertical mode. |
| | USS class name that's added when the ScrollView is in both horizontal and vertical mode. |
| | |
| | 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 at every level of its hierarchy.
VisualElement