Control, Control, You Must Learn Control - Unity 3D UI Essentials - page 134

For this example, we create the following:

1. An empty GameObject for the boundaries of the Scrollable area. I also

added an Image control (using one of the backgrounds from the UI Pack
we used earlier) to have a border around the image area for effect. Name
this GameObject Scroll Border and set its dimensions to 400x200.

2. Add an Image and a child Text control for the header positioned above

the main Scroll Border (yes, you can place UI GameObjects outside of
their parents').

3. Then add two Scrollbar controls to the right and bottom of the Scroll

Border . Resize the Scrollbars to fit, don't rotate them! Then set the Scrollbar
Direction appropriately for the Vertical or Horizontal nature of the bar.
For example, I set the Vertical bar to BottomToTop and the Horizontal to
the default LeftToRight .

4. Add an Empty GameObject called Scroll Rect as a child to the Scroll Border

and resize it to the inner dimensions of the Scroll Border . (Since my border
has a border image, I set it slightly smaller to the parent so the border will be
visible). This will be our Scroll Rect control but let's add its content child next.

5. Add an Image as a child to the Scroll Rect GameObject; this is for the

content that you want to be scrollable. Make its Rect dimensions larger
than the parent (say 1024 x 448). I used the Unity5 logo image (provided in
the downloadable assets) as the Source Image for the Image component.
(The Unity Logo image is a 1024 x 448 image, far larger than the Scroll Rect
dimensions of approximately 400 x 200).

6. Now returning to the Scroll Rect GameObject, we add a Scroll Rect

component, setting its Content property to the child Image GameObject we
created and also attaching the two Scrollbars to the Scrollbar properties of
the Scroll Rect (just drag them from the project hierarchy to the relevant
properties of the Scroll Rect component).

7. Finally we add a UI Mask component and an UI Image component to

the Scroll Rect GameObject so we can only see the part of the image
underneath, that is within the boundaries of the Scroll Rect .

We have to add an Image for the Mask component to work as it works
with the Graphics Raycaster to only render the masked area.

The Scrollbars are completely optional of course as we can manipulate the
scrollable area either with the Scrollbars or just by touching and dragging within
the Scroll Rect area.