Scrolling and scrollbars in Unity - Unity UI tutorial

Introduction

In this tutorial, you will learn how to implement scrolling features in Unity using the UI system. This guide covers the creation of both vertical and horizontal scrolling views, adding scrollbars, and adjusting scrolling speeds for mouse input. These techniques are essential for designing user-friendly interfaces, such as lists and galleries in games or applications.

Step 1: Creating a Vertical Scrolling List

1. Set Up Your Scene

   • Open Unity and create a new scene or use an existing one.

2. Create a Scroll View

   • Right-click in the Hierarchy panel.
   • Select UI > Scroll View. This will create a new Scroll View GameObject, which includes a viewport and a scrollbar.

3. Configure the Scroll View

   • Select the Scroll View in the Hierarchy.
   • In the Inspector panel, adjust the size and position to fit your layout needs.

4. Add Content to the Scroll View

   • Inside the Scroll View, find the Content GameObject.
   • Right-click the Content GameObject, then select UI > Vertical Layout Group to arrange items vertically.
   • Add UI elements (like Text or Images) as children of the Content GameObject.

5. Adjust Layout Settings

   • With the Vertical Layout Group selected, configure the spacing and alignment to suit your design.
   • Ensure that the Content Size Fitter component is also added to the Content GameObject to automatically resize based on the children.

Step 2: Creating a Horizontal Scrolling List

1. Create a New Scroll View for Horizontal Scrolling

   • Right-click again in the Hierarchy and select UI > Scroll View.

2. Change Scroll Orientation

   • Select the new Scroll View.
   • In the Inspector, find the Scroll Rect component.
   • Change the Horizontal checkbox to true and uncheck Vertical.

3. Add Content for Horizontal Layout

   • Locate the Content GameObject within the Scroll View.
   • Add a Horizontal Layout Group component to the Content GameObject for horizontal arrangement.

4. Insert UI Elements

   • Add UI elements (like images or buttons) as children to the Content GameObject.

5. Configure Layout Settings

   • Adjust spacing and alignment in the Horizontal Layout Group component to create the desired visual effect.

Step 3: Adding a Scrollbar

1. Add Scrollbar to Your Scroll View

   • Right-click the Scroll View in the Hierarchy.
   • Select UI > Scrollbar to create a new scrollbar.

2. Link the Scrollbar to the Scroll View

   • Select the Scroll View and find the Scroll Rect component in the Inspector.
   • In the scrollbar field, drag the created scrollbar into the Vertical Scrollbar or Horizontal Scrollbar field, depending on your layout.

3. Configure Scrollbar Settings

   • Adjust the scrollbar’s size and position to fit the design.
   • Check the properties of the scrollbar to set its visibility and behavior.

Step 4: Changing Scrolling Speed with Mouse Wheel

1. Select Your Scroll View

   • Go to the Scroll View GameObject in the Hierarchy.

2. Adjust Scroll Rect Settings

   • In the Scroll Rect component, find the Scroll Sensitivity property.
   • Adjust the value to control how fast the content scrolls when the mouse wheel is used.

Conclusion

You have now learned how to create vertical and horizontal scrolling views in Unity, add scrollbars, and adjust scrolling speeds for mouse input. These features enhance the usability and functionality of your UI elements. For further enhancement, consider experimenting with different UI elements and layouts to create a more engaging user experience. Happy developing!