Scrollbar

Unity UGUI 的 Scrollbar 滚动条。它和 Slider 外观相似，但用途不同：

Slider 用来选择数值，Scrollbar 用来表示和控制滚动位置。

1. 截图中的当前状态

截图中：

• Interactable：开启，可以拖动。
• Transition：Color Tint。
• Target Graphic：Handle (Image)。
• Navigation：Automatic。
• Handle Rect：Handle。
• Direction：Left To Right。
• Value：0。
• Size：0.2。
• Number Of Steps：0。
• On Value Changed：空列表。
• 底部使用默认 UI/Default 材质。

截图没有显示 Rect Transform，说明 Inspector 当前可能已经滚动到 Scrollbar 组件区域。

2. Scrollbar 的核心结构

常见的 Scroll View 层级：

Scroll View
├── Viewport
│   └── Content
├── Horizontal Scrollbar
└── Vertical Scrollbar

各对象作用：

• Viewport：可视区域。
• Content：真正被滚动的内容。
• Horizontal Scrollbar：控制水平方向滚动。
• Vertical Scrollbar：控制垂直方向滚动。
• Handle：Scrollbar 上可以拖动的滑块。

运行过程：

拖动 Scrollbar
        ↓
Scroll Rect 改变 Content 位置
        ↓
画面显示不同区域

反过来，用户拖动内容或滚动鼠标滚轮时，Scroll Rect 也会自动更新 Scrollbar 的 Value 和 Size。

3. Handle Rect

截图中：

Handle Rect = Handle (Rect Transform)

表示哪个 RectTransform 是可拖动的手柄。

Scrollbar 本身通常只需要一个 Handle Rect，不像 Slider 那样需要单独指定 Fill Rect。

如果手柄不显示或拖不动，检查：

• Handle Rect 是否引用了正确对象。
• Handle 是否有 Image。
• Handle 是否被禁用。
• Handle 的 RectTransform 是否位于轨道范围内。

4. Direction

截图中：

Direction = Left To Right

表示：

左端 Value = 0
右端 Value = 1

其他方向：

• Right To Left：右端是 0，左端是 1。
• Bottom To Top：底部是 0，顶部是 1。
• Top To Bottom：顶部是 0，底部是 1。

水平滚动使用左右方向，垂直滚动通常使用 Bottom To Top。

5. Value

Scrollbar 的 Value 始终是 0~1 之间的小数。

• Value = 0：位于起点。
• Value = 0.5：位于中间。
• Value = 1：位于终点。

截图中：

Value = 0

因此手柄处于最左端。

Scrollbar 与 Slider 的重要区别：

组件	Value 范围	主要用途
Slider	自定义 Min/Max	选择音量、亮度、血量等数值
Scrollbar	固定 0~1	控制内容滚动位置

Unity 官方 API 将 Scrollbar 的 Value 定义为 0~1 之间的当前位置。Scrollbar API

6. Size

截图中：

Size = 0.2

表示 Handle 长度约占整个滚动条长度的 20%。

可以这样理解：

• Handle 越短：可滚动内容越多。
• Handle 越长：可视内容占比越大。
• Size = 1：Handle 填满轨道，通常表示没有可滚动内容。

在 Scroll View 中，Size 通常由：

Viewport 可视区域大小
Content 内容大小

共同决定。

例如：

Viewport 高度 = 200
Content 高度 = 1000
可视比例约为 200 / 1000 = 0.2

所以 Scrollbar 的 Size 大约就是 0.2。

7. Number Of Steps

截图中：

Number Of Steps = 0

表示连续滚动，Value 可以是任意小数，例如：

0.12
0.37
0.86

当设置为大于 0 的数值时，Scrollbar 会使用离散滚动位置。

例如：

Number Of Steps = 4

表示把滚动位置分成若干个固定步骤，适合：

• 分页内容
• 章节切换
• 图片查看器
• 一页一页滚动的界面

Unity API 明确说明，0 会关闭步骤功能。Scrollbar API

8. Transition

截图中的：

Transition = Color Tint
Target Graphic = Handle (Image)

表示鼠标悬停、按下或禁用时，改变 Handle 的颜色。

常用状态：

• Normal Color：正常状态。
• Highlighted Color：悬停或获得焦点。
• Pressed Color：鼠标按下。
• Selected Color：键盘或手柄选中。
• Disabled Color：不可交互。
• Color Multiplier：颜色强度。
• Fade Duration：颜色过渡时间。

Transition 还可以选择：

• None
• Color Tint
• Sprite Swap
• Animation

Unity Selectable 过渡选项

9. Navigation

截图中：

Navigation = Automatic

表示可以使用键盘方向键或手柄切换 UI 焦点。

常见模式：

• None：关闭键盘和手柄导航。
• Horizontal：只允许左右移动。
• Vertical：只允许上下移动。
• Automatic：自动寻找相邻 UI。
• Explicit：手动指定导航目标。
• Visualize：在 Scene 窗口显示导航连线。

10. On Value Changed

截图中：

On Value Changed (Single)
List is Empty

表示当前没有绑定事件。

Scrollbar 的事件参数类型是：

float

示例：

using UnityEngine;
using UnityEngine.UI;

public class ScrollbarDemo : MonoBehaviour
{
    [SerializeField] private Scrollbar scrollbar;

    public void OnScrollbarChanged(float value)
    {
        Debug.Log("滚动位置：" + value);
    }

    public void SetMiddle()
    {
        scrollbar.value = 0.5f;
    }
}

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

ScrollbarDemo → OnScrollbarChanged(float)

也可以不触发事件地修改：

scrollbar.SetValueWithoutNotify(0.5f);

11. 与 Scroll Rect 绑定

代码绑定示例：

using UnityEngine;
using UnityEngine.UI;

public class ScrollViewSetup : MonoBehaviour
{
    [SerializeField] private ScrollRect scrollRect;
    [SerializeField] private Scrollbar verticalScrollbar;

    private void Start()
    {
        scrollRect.verticalScrollbar = verticalScrollbar;
    }
}

也可以直接在 Scroll Rect Inspector 中设置：

Vertical Scrollbar = 目标 Scrollbar

Scroll View 通常还需要：

• Viewport
• Content
• Mask 或 Rect Mask 2D
• Scroll Rect
• Scrollbar

Unity 官方说明，Scrollbar 通常与 Scroll Rect 和 Mask 一起使用。Unity UI 交互组件

12. 常见问题

手柄不显示：

• 检查 Handle Rect。
• 检查 Handle 是否有 Image。
• 检查 Handle 的颜色 Alpha。
• 检查 Handle 是否被禁用。

Scrollbar 拖不动：

• 检查 Interactable。
• 检查场景是否有 EventSystem。
• 检查 Canvas 是否有 Graphic Raycaster。
• 检查是否被其他 UI 覆盖。

手柄大小不对：

• 检查 Size。
• 检查 Scroll Rect 的 Viewport 和 Content 尺寸。
• 检查 Content 是否真的大于 Viewport。

方向相反：

• 检查 Direction。
• 水平滚动通常使用 Left To Right。
• 垂直滚动通常使用 Bottom To Top。

Scrollbar 不跟随内容：

• 检查 Scroll Rect 是否引用了正确的 Scrollbar。
• 检查 Content 是否是 Scroll Rect 的 Content。
• 检查 Horizontal 或 Vertical 滚动选项是否开启。

一句话记忆：

Scrollbar 的 Value 管“滚到哪里”，Size 管“能看到多少”，Handle 管“拖动位置”，Scroll Rect 管“移动内容”。

SVG 已完成最终预览，底部总结和代码区域也已保留，没有文字越框。