Scroll View

UGUI 的 Scroll Rect，它是 Unity Scroll View 的核心控制组件：

Content 是被移动的内容，Viewport 是可见窗口，Scroll Rect 负责计算和移动内容，Scrollbar 负责显示滚动位置。

1. 截图中的当前状态

截图中：

• Content：引用 Content (Rect Transform)
• Horizontal：开启
• Vertical：开启
• Movement Type：Elastic
• Elasticity：0.1
• Inertia：开启
• Deceleration Rate：0.135
• Scroll Sensitivity：1
• Viewport：引用 Viewport (Rect Transform)
• 水平滚动条：Scrollbar Horizontal
• 垂直滚动条：Scrollbar Vertical
• 滚动条可见性：Auto Hide And Expand Viewport
• 滚动条间距：-3
• On Value Changed：空列表

2. Scroll View 的层级结构

常见层级如下：

Scroll View
├── Viewport
│   └── Content
│       ├── Item 1
│       ├── Item 2
│       └── Item 3
├── Scrollbar Horizontal
└── Scrollbar Vertical

各对象作用：

• Scroll View：挂载 Scroll Rect。
• Viewport：限制可见区域，通常添加 Mask 或 Rect Mask 2D。
• Content：真正被移动的内容。
• Scrollbar Horizontal：控制水平方向。
• Scrollbar Vertical：控制垂直方向。

Unity 官方说明，Scroll Rect 通常与 Mask 和一个或两个 Scrollbar 一起创建滚动视图。Scroll Rect 官方手册

3. Content

截图中的：

Content = Content (Rect Transform)

表示 Scroll Rect 会移动这个 Content。

Content 通常应该比 Viewport 大：

Content 高度 > Viewport 高度

否则没有多出来的内容，也就没有滚动距离。

例如：

Viewport 高度 = 400
Content 高度 = 1200

用户就可以在 400 高度的窗口中滚动查看 1200 高度的内容。

常见的 Content 配置：

• 垂直列表：Vertical Layout Group
• 水平列表：Horizontal Layout Group
• 网格列表：Grid Layout Group
• 动态高度：Content Size Fitter

4. Horizontal 与 Vertical

Horizontal

开启后允许水平滚动。

适合：

• 横向道具列表
• 横向角色选择
• 时间轴
• 大型图片浏览

Vertical

开启后允许垂直滚动。

适合：

• 设置列表
• 背包列表
• 对话内容
• 排行榜
• 文章页面

截图中两个都开启，因此支持水平和垂直方向滚动。

5. Movement Type

截图中：

Movement Type = Elastic

三种模式：

• Unrestricted：不限制边界，Content 可以被拖出 Viewport。
• Elastic：允许越界，松手后弹回边界。
• Clamped：严格限制在边界内，不允许越界。

通常：

• 普通手机列表：使用 Elastic。
• 设置页面和严谨菜单：使用 Clamped。
• 地图、自由拖拽界面：可以使用 Unrestricted。

6. Elasticity

截图中：

Elasticity = 0.1

它控制 Elastic 模式下的回弹效果。

• 数值较小：回弹更快、更紧。
• 数值较大：回弹更明显、更柔软。

这个字段只有在 Movement Type = Elastic 时才明显生效。

7. Inertia

截图中：

Inertia = On

开启后，用户拖动 Content 并松手后，内容仍会继续移动一段距离。

关闭后：

• 手指或鼠标按住时移动。
• 松手后立即停止。

移动端滚动列表通常开启惯性，编辑器型界面可以考虑关闭。

8. Deceleration Rate

截图中：

Deceleration Rate = 0.135

它决定惯性滚动停止的速度。

• 越小：减速越快，松手后很快停止。
• 越接近 1：惯性持续更久。
• 0：几乎立即停止。
• 1：理论上不会减速。

截图中的 0.135 是 Unity 常见默认值。Unity Scroll Rect 属性说明

9. Scroll Sensitivity

截图中：

Scroll Sensitivity = 1

它控制：

• 鼠标滚轮滚动速度。
• 触控板滚动速度。

注意，它主要影响滚轮和触控板，不是拖动手感。

如果滚轮太快，可以调小：

Scroll Sensitivity = 0.5

如果滚动太慢，可以调大：

Scroll Sensitivity = 2

10. Viewport

截图中的：

Viewport = Viewport (Rect Transform)

Viewport 就是用户能看到的窗口。

Content 超出 Viewport 的部分，需要通过 Mask 裁掉，否则内容会显示到窗口外。

常见设置：

Viewport
├── Rect Transform
├── Image（可选）
└── Rect Mask 2D 或 Mask

Rect Mask 2D 通常更适合矩形列表，性能和使用都比较直接。

11. Scrollbar 设置

Horizontal Scrollbar

引用水平滚动条：

Scrollbar Horizontal

它会显示水平滚动位置，并且可以被用户拖动。

Vertical Scrollbar

引用垂直滚动条：

Scrollbar Vertical

它会显示垂直滚动位置。

Visibility

截图中：

Auto Hide And Expand Viewport

三种常用模式：

• Permanent：始终显示滚动条。
• Auto Hide：不需要滚动时隐藏，但 Viewport 大小不变。
• Auto Hide And Expand Viewport：不需要滚动时隐藏，并扩大 Viewport。

截图使用第三种模式，因此当内容不够滚动时，滚动条会隐藏，同时可视区域会变大。Scrollbar Visibility 官方说明

Spacing

截图中：

Spacing = -3

Spacing 表示滚动条与 Viewport 之间的距离：

• 0：贴近 Viewport。
• 大于 0：两者之间留间隙。
• 小于 0：两者产生重叠。

-3 表示滚动条向 Viewport 方向轻微重叠 3 个 UI 单位。

12. On Value Changed

截图中：

On Value Changed (Vector2)
List is Empty

表示 Scroll Rect 的滚动位置变化时，目前还没有绑定脚本。

参数类型是：

Vector2

其中：

• x：水平滚动位置。
• y：垂直滚动位置。

示例：

using UnityEngine;

public class ScrollRectDemo : MonoBehaviour
{
    public void OnScrollChanged(Vector2 position)
    {
        Debug.Log("当前滚动位置：" + position);
    }
}

在 Inspector 中点击 +，拖入脚本对象，选择：

ScrollRectDemo → OnScrollChanged(Vector2)

13. 代码控制滚动位置

using UnityEngine;
using UnityEngine.UI;

public class ScrollController : MonoBehaviour
{
    [SerializeField] private ScrollRect scrollRect;

    public void ScrollToTop()
    {
        scrollRect.verticalNormalizedPosition = 1f;
    }

    public void ScrollToBottom()
    {
        scrollRect.verticalNormalizedPosition = 0f;
    }

    public void ScrollToLeft()
    {
        scrollRect.horizontalNormalizedPosition = 0f;
    }

    public void ScrollToRight()
    {
        scrollRect.horizontalNormalizedPosition = 1f;
    }
}

也可以同时设置水平和垂直位置：

scrollRect.normalizedPosition = new Vector2(0f, 1f);

这通常表示：

左上角

14. 常见问题

不能滚动：

• Content 没有大于 Viewport。
• Horizontal 或 Vertical 没有开启。
• Content 没有正确绑定。
• Scroll Rect 没有接收到输入。

内容显示到窗口外：

• Viewport 缺少 Mask 或 Rect Mask 2D。
• Content 没有放在 Viewport 下。
• Content 的层级关系错误。

滚动条不跟随：

• Horizontal Scrollbar 或 Vertical Scrollbar 引用错误。
• Scrollbar 的方向设置错误。
• Scroll Rect 的水平、垂直方向没有开启。

滚轮没有反应：

• Scroll Sensitivity 为 0。
• 场景中缺少 EventSystem。
• Canvas 缺少 Graphic Raycaster。
• 鼠标没有位于 Viewport 区域。

滚动有明显回弹：

• Movement Type 使用了 Elastic。
• 将其改为 Clamped 可以取消越界回弹。

列表滚动位置不正确：

• 检查 Content 的锚点和 Pivot。
• 垂直列表通常使用顶部锚点。
• 使用 Layout Group 时，避免多个自动布局组件互相驱动。

一句话记忆：

Content 是内容，Viewport 是窗口，Scroll Rect 负责移动，Scrollbar 负责显示和控制滚动位置。

SVG 已完成预览检查，底部代码、排错区域和总结均未越出画布。