UI Scrollbar - Unity Official Tutorials

The scrollbar allows users to select a numeric value

from 0 to 1 by dragging the handle of the scrollbar.

Scrollbars are usually used to set or change a value

on another UI element or component.

Scrollbars are commonly used with a scroll rect,

which can hold and mask contents

too large to be easily viewed.

The scroll rect will use the value from the

scrollbar to control how it's contents are scrolled.

For more information on scroll rects

please see the information linked below.

The scrollbar's value is set by the position of

the handle along the length of the scrollbar.

The value is a normalised value that starts at

0 at one end of the scrollbar

and increases up to 1 at the other end.

A value of 0.5 indicates the halfway point.

To create a new scrollbar use the Create

menu to Create - UI - Scrollbar.

like all UI elements, the scrollbar element

must be the child of a canvas.

If one is not present when creating a pre-made

scrollbar a new canvas will be created.

For more information on the canvas

please see the information linked below.

When the scrollbar is created it is made from a

family of game objects.

The children are the rect transform and image components

that define the sliding area and the handle graphic.

The parent game object is where the required

scrollbar script resides.

The background image is a component on the parent game object.

Interact-able determines whether or not this particular

scrollbar will accept input.

To prevent interaction with a scrollbar

set Interact-able to false.

When interact-able is set to false

the transition state for the scrollbar element

will be set to the disabled state.

By default the scrollbar element will display

the normal state of the scrollbar.

Depending upon the transition mode chosen

a scrollbar can also display a highlighted

pressed and disabled state.

Transition Mode determines whether or not the

scrollbar element will display any of these additional states,

and if so controls the slider's look in each state

and the style of the transitions between the states.

The transition mode property is shared

by many UI elements and will be

covered in it's own lesson.

For more information on transitions and the

transition mode property please see the

information linked below.

When using transitions with a scrollbar

it is worth noting that, with the exception of

the animation transition mode,

any visual changes are only seen in the handle graphic

not the rest of the UI element.

Navigation describes how the selection

of UI elements is handled when using

keyboard or controller input.

Navigation is shared by many UI elements

and will be covered in it's own lesson.

For most circumstances navigation can simply

be set to automatic.

For more information on navigation

please see the information linked below.

Handle rect is a reference to the rect transform

on the graphic used for the handle.

Direction sets both the axis and

the direction of the value changed.

The value is a normalised value that starts with 0

at one end of the scrollbar and increasing

up to 1 at the other end.

For example, with the choice of left to right,

the starting value of 0 will be at the left of the scrollbar

and the value of the scrollbar will increase

proportionally as the handle moves from left to right

with a value of 1 at the right.

The choices for direction are

LeftToRight,

RightToLeft,

BottomToTop and TopToBottom.

The value is the current value of the scrollbar

When the value is set in the inspector during edit time

this will set the starting value for the scrollbar.

Size is the fractional size of the

handle within the scrollbar,

in a range of 0 to 1.

Number of steps is the number of distinct

positions allowed by the scrollbar.

For a smooth continuous scroll

set this value to 0 or 1.

The UI framework contains a powerful events system

This is created when the canvas is created.

When the event system detects a click

or a drag on the scrollbar

the event system will call an OnValueChanged event.

The scrollbar component includes a built-in

on value changed function list

that contains a list of all the functions

that are called when the scroll values change.

Additional events can be detected and used

by the scrollbar element , but this requires

an additional component.

For more information on how to use the build in

function's list, events, the event system and event triggers

please see the information linked below.

In most cases the scrollbar will

be used with the scroll rect.

which will automatically use the dynamic

value of the scrollbar when they are associated.

For more information on the scroll rect

please see the information linked below.