Unity Scrollview UI game object can be used to make a scrollable UI within minutes without writing a single line of code. In this tutorial, we will try to understand the components in Unity Scrollview and how to configure them.
You can watch the tutorial in video format here
Step1: Adding the Unity Scroll View UI to your scene
Go to the Hierarchy window and click on the + sign. Go to UI>Scroll View.
This is will add a Scroll View. This element has the following children
- Viewport: This is the visible area of the UI. Adjust the size based on your UI requirement. Any UI element that is a child of Viewport won’t be visible if its outside the Viewport rect transform.
- Scroll bar Horizontal and Vertical: These are scroll bars for your Viewport. The scroll view is responsive to mouse click and touch inputs, so if you don’t want the scroll bars you can remove them.
- Content: Content is a child of Viewport. All the UI elements should be contained within the Content rect transform. The size of the Content rect transform can be bigger than Viewport.
Step2: Settings on Scroll Rect
The Scroll Rect component attached to the Scroll view is responsible for putting together all the components. By default, Unity assigns the Content, Viewport and the scroll bars to the Scroll rect. If you want to assign custom settings then you can do that here.
For our tutorial, we will not be using the scroll bars and the UI should be scrollable only in the horizontal axis. So, let’s Uncheck Vertical and set the Horizontal and vertical scrollbars to none.
Step3: Adding UI elements
Let’s add 5 buttons to the scene. Now let’s arrange them in a horizontal line so that two of the buttons are inside the Viewport and the rest are outside the Viewport area.
Let’s resize the content rect transform to accommodate all the UI buttons.
Add all the UI elements as the child of the Content game object.
The Viewport has a mask component attached to it. If you don’t want the UI elements outside the Viewport to be masked then you can uncheck it.