Detailed explanation of the use of ScrollRect scroll view component of Unity UGUI

1. What is the ScrollRect component?

ScrollRect is a common component in Unity UGUI for creating scrollable areas in the UI interface.

Through the ScrollRect component, it is possible to display a large amount of content in a limited space, and the content can be browsed through swipe gestures.

2. How the ScrollRect component works

The ScrollRect component changes the display position of the content by placing it in a scrollable rectangular area and then using drag or swipe gestures.

The ScrollRect component contains two sub-objects, a Viewport and a Content. The Viewport is used to limit the display range of the Content, and the Content contains the actual content.

3. Common properties of ScrollRect components

Content: RectTransform object used to place the actual content.
Horizontal: Whether to allow horizontal scrolling.
Vertical: Whether to allow vertical scrolling.
Movement Type: The scrolling type, optional types are: Unrestricted, Elastic, and Clamped.
Inertia: Whether to enable inertial scrolling.
Deceleration Rate: The deceleration rate of inertial rolling.
Scroll Sensitivity: Scroll sensitivity.

4. Common functions of ScrollRect components

ScrollTo: Scroll to the specified position.
StopMovement: Stop scrolling.
OnBeginDrag: The function called when starting to drag and drop.
OnDrag: The function called during dragging and dropping.
OnEndDrag: The function called when ending dragging.

5. Sample code

Example 1: Basic scroll view

using UnityEngine;
using ;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // Set the size of the Content        RectTransform content = ;
         = new Vector2(0, 1000);
        // Set the scrolling range of the scroll view         = 1;
    }
}

Operation steps:

Create an empty GameObject and add the ScrollRect component.
Select the ScrollRect object in the Hierarchy panel and drag the Content object into the Content property of the ScrollRect.
Add the sample code to the ScrollRectExample script and drag the ScrollRect object into the scrollRect property.
Run the game and you can see that the content in the scroll view can be scrolled through the swipe gesture.

Example 2: Limit scrolling range

using UnityEngine;
using ;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // Set the size of the Content        RectTransform content = ;
         = new Vector2(0, 1000);
        // Set the scrolling range of the scroll view         = 1;
         = ;
    }
}

Operation steps:

Create an empty GameObject and add the ScrollRect component.
Select the ScrollRect object in the Hierarchy panel and drag the Content object into the Content property of the ScrollRect.
Add the sample code to the ScrollRectExample script and drag the ScrollRect object into the scrollRect property.
Run the game and you can see that the content in the scroll view is restricted when scrolling to the boundary.

Example 3: Inertial Rolling

using UnityEngine;
using ;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // Set the size of the Content        RectTransform content = ;
         = new Vector2(0, 1000);
        // Set the scrolling range of the scroll view         = 1;
         = true;
         = 0.5f;
    }
}

Operation steps:

Create an empty GameObject and add the ScrollRect component.
Select the ScrollRect object in the Hierarchy panel and drag the Content object into the Content property of the ScrollRect.
Add the sample code to the ScrollRectExample script and drag the ScrollRect object into the scrollRect property.
Run the game and you can see that the content in the scroll view will have an inertial scrolling effect after the slide ends.

Example 4: Scroll to the specified position

using UnityEngine;
using ;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // Set the size of the Content        RectTransform content = ;
         = new Vector2(0, 1000);
        // Set the scrolling range of the scroll view         = 1;
        // Scroll to the specified position        (new Vector2(0, 500), 0.5f);
    }
}

Operation steps:

Create an empty GameObject and add the ScrollRect component.
Select the ScrollRect object in the Hierarchy panel and drag the Content object into the Content property of the ScrollRect.
Add the sample code to the ScrollRectExample script and drag the ScrollRect object into the scrollRect property.
Run the game and you can see that the scroll view will automatically scroll to the specified position.

Example 5: Stop scrolling

using UnityEngine;
using ;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // Set the size of the Content        RectTransform content = ;
         = new Vector2(0, 1000);
        // Set the scrolling range of the scroll view         = 1;
        // Stop scrolling        ();
    }
}

Operation steps:

Create an empty GameObject and add the ScrollRect component.
Select the ScrollRect object in the Hierarchy panel and drag the Content object into the Content property of the ScrollRect.
Add the sample code to the ScrollRectExample script and drag the ScrollRect object into the scrollRect property.
Run the game and you can see that the scroll view will stop scrolling.

6. Things to note

The ScrollRect component needs to be used with other UI components (such as Mask) to limit the display range of content.
When using the ScrollRect component, you need to pay attention to the settings of the content size and scroll range to ensure that the content can be displayed and scrolled correctly.

References

Unity official documentation - ScrollRect

The above is the detailed explanation of the use of the ScrollRect scroll view component of Unity UGUI. For more information about Unity UGUI ScrollRect, please follow my other related articles!