The scroll rect is a UI element that
allows the user to move another UI
element along the horizontal and/or
vertical
axes. This is usually a large image or a
panel of other UI elements such as a
list of buttons or a large block of
text. The scroll rect is most often used
with a mask
element and is designed to work
seamlessly with scroll bars.
Masks and scroll bars will be covered in
this lesson, but only briefly. For more
detailed information on masks and scroll
bars, please see the information linked
below. To create a scroll rect, add a
scrollerect script to a game object that
is the child of a
canvas. Like all UI elements, the scroll
wreck must be the child of a
canvas. One way to add the scroll w
script to the game object is to use add
component.
UI scrollere wctck. For this example,
the game object will be renamed scroll
view. Content is a reference to the
recct transform on the UI element being
controlled by the scroll rect. For
example, an image far larger than the
scroll rect. Associate the content, in
this case the large image with the
content property on the scroll
rect when in play mode. This content is
fully
scrollable. The scroll rect is commonly
used with a mask element. To use a mask
element with the scroll rect, first add
an image script to the game object for
the mask to
use and then add a mask script.
The mask element will use the image to
create its
mask. A specific image is not needed on
the image script, but one can be added
for additional control over the shape of
the
mask. For more information on the image
and mask elements, please see the
information linked
below. Horizontal and vertical enable
scrolling along those axes.
To disable scrolling along one axis, set
that axis property to
false. Movement type describes the
scrolling
mode. The scrolling mode can be chosen
by the movement type popup
menu. Unrestricted allows for
unrestricted scrolling
movement. This is not a common mode to
choose, and it is entirely possible
without some additional method to lose
the content in a way that is
irretrievable.
This mode, however, may prove to be
useful under certain
circumstances. When using either elastic
or clamped as the movement type, the
content cannot leave the bounds of the
scroll rect on any of the scrollable
axes. In these two modes, for the
content to be scrollable, the recct
transform of the content must be larger
than the recct transform of the scroll
rect. If the recct transform of the
content is smaller than the recct
transform of the scroll wctck, it cannot
be scrolled along that
axis. When positioning the content in
either of these modes, it is best to
position the content so that it starts
within the bounds of the scroll rect or
undesirable behavior may occur as the
wctck transform tries to bring the
content back within its
bounds. When using the movement type
elastic, the content will bounce when it
reaches the bounds of the scroll
rect. The amount of bounce is set by the
elasticity
property. When using the movement type
clamped, the content will not bounce
when it reaches the bounds. It will
simply stop scrolling.
Inertia defines whether or not the
content will continue to glide when
releasing the pointer after a drag. When
inertia is false, the content will only
move when dragged. If inertia is set to
true, the content will continue to glide
after the pointer has ended the drag.
How soon the content stops gliding is
determined by the deceleration rate
property. A deceleration rate of zero
means the gliding will stop
instantly. The value of one means the
gliding will never slow
down. Horizontal and vertical scroll
bars are optional references to
potential scroll bar elements.
To use scroll bars with a scroll rect,
simply create the scroll bars
needed. Position
them and associate the scroll bars with
the properties on the scroll
rect. They will work
automatically. For more information on
scroll bars and how to set them up,
please see the information linked below.