Unity3D – Tutorials – UI – Scroll Rect – Image

Inside a Scrool Rect you can scroll an image greater than the Scroll Rect Area.

Scrool Rect – No ScroolBars

0. MAIN TOP MENU> GameObject> UI> Canvas

1. MAIN TOP MENU> GameObject> UI> Image

2. MAIN TOP MENU> GameObject> Empty Object, rename it ScrollRectObj

3. Hierarchy> select ScrollRectObj> Inspector> ‘Add Component’
> Scroll Rect (Transform component will be authomatic removed)
> Image
> Mask

4. Parent as show below:

– Canvas
-> ScrollRectObj (child of Canvas)
->> Image (child of ScrollRectObj)

5. Setup size and position:

– Inspector> ScrollRectObj: Width= 100 Height= 100 Pos XYZ= 0,0,0

– Inspector> Image: Width= 200 Height= 200 Pos XYZ= 200,0,0

The Image is greater than ScrollRectObj and in a different position

6. Setup ScrollRectObj

– Inspector> ScrollRectObj> Scroll Rect (Script)> Content, DRAG AND DROP from ‘Hierachy> Image’ here

Play, Image will be moved inside ScrollRectObj, DRAG the image to move it

WARNING: the best practice is put the Image already inside the Scrool Rect, then please modify:
Inspector> Image: Width= 200 Height= 200 Pos XYZ= 0,0,0

Scrool Rect – Yes ScroolBars

1. Hierarchy> RMB over Canvas> UI> Scrollbar

– Canvas
-> ScrollRectObj (child of Canvas)
->> Image (child of ScrollRectObj)
-> Scrollbar (MUST BE CHILD OF CANVAS)

2. Hierarchy> select Scrollbar DRAG AND DROP Inspector> ScrollRectObj> Scroll Rect (Script)> Horizontal Scrollbar

3. Play and enjoy!