Scroll View

LTS 2022.3

Scroll View

Scroll Views in Figma

Scroll view allows for vertical and horizontal scrolling of its contained views.

Implementation references

Scripting API and implementation references.

UI Toolkit

IMGUI

Overview

Scroll view with a vertical scrollbar in project window in dark and light themes

Unity Editor contains four types of search fields:

1 Vertical scrollbar

2 Horizontal scrollbar

Scroll view is a view container that allows the scrolling and zooming of its contained views
It allows the display of content that is larger than the containing view
It clips the content to its frame which can be adjusted to match the containing viewport

Scroll view APIs

Scroll views can have horizontal and vertical scrollbars

Scroll view in UI Toolkit

UI Builder

About UI Builder ->

UI Builder allows visual creation of UI assets in UI Toolkit, and is available as a built-in feature {2021.1 and later} or a package {2020.3 and earlier}

API in

UI Toolkit

ScrollView

Makes a scrollable frame

Docs ->

Scroll view in IMGUI

APIs in

IMGUI

EditorGUILayout
.BeginScrollView

Begin an automatically laid out scrollview

Docs ->

EditorGUILayout
.EndScrollView

Ends a scrollview started with a call to BeginScrollView

Docs ->

Guidance

When to use

Scroll view is a container control that enables scrolling in the window, when content is larger than the viewport
Place your content in a scroll view when your window has limited viewport space, e.g. long list / tree views or modals
Scroll views can have vertical and horizontal scrollbars

Container and viewport

An annotated diagram of a foldout header and foldout contents

Scroll view displaying content viewport and content container

Content container

In the UI Toolkit framework, contentContainer represents the entire content area, and can potentially be partially visible.

Content viewport

In the UI Toolkit framework, contentViewport represents the visible part of contentContainer.

Horizontal and vertical scrollbars

Project window scroll view with both horizontal and vertical scrollbars

Scroll views have different parameters for their scrollbar behavior based on the framework they are used.

Vertical scrollbars

In the UI Toolkit framework, use showVertical property to display a vertical scrollbar
In IMGUI framework, use alwayShowVertical property to always display a vertical scrollbar

Horizontal scrollbars

In the UI Toolkit framework, use showHorizontal property to display a horizontal scrollbar
In IMGUI framework, use alwayShowHorizontal property to always display a horizontal scrollbar

Scrolling speed

In the UI Toolkit framework, scrolling speed can be adjusted by changing the page size property.

Vertical scroller speed

In the UI Toolkit framework, change verticalPageSize value to control the scrolling speed of the vertical scroller

Horizontal scroller speed

In the UI Toolkit framework, change horizontalPageSize value to control the scrolling speed of the vertical scroller

Elasticity

In the UI Toolkit framework, the amount of elasticity to use when a user tries to scroll past the boundaries of the scroll view can be adjusted by using the elasticity property.