【Unity UGUI 交互组件——Scrollbar（8）】

Unity UGUI 滚动条 (Scrollbar) 速览

Scrollbar ≠ Slider：Slider 用来 选数值 ，Scrollbar 用来 滚动视图。

1. 概述

Scrollbar 是 "滚动视图专用滑动器"，常见于

聊天框右侧 垂直滚动
地图查看器 水平滚动
时间轴 水平滚动

2.三个组成

Hierarchy 对象	作用一句话	可删？	常用修改
Scrollbar (根)	挂 Scrollbar 脚本，统筹一切	❌	改方向、范围、事件
Sliding Area	轨道容器，决定把手行程	❌	改锚点/大小控制行程
Handle	可拖动把手 (Image/Button)	❌	换图标、加阴影、调尺寸

没有单独的 Background / Fill ，背景直接由 Sliding Area 的 Image 充当，把手大小由 Handle Rect + Size 控制。

3. 滚动条 vs 滑动条

维度	Scrollbar	Slider
目的	滚动视图	选数值
Handle	大小可变表示可滚动范围	固定大小
典型值	`Value` 0-1 表示滚动位置	`Value` 0-100 表示数值
用例	文本、地图、时间轴	音量、血量、难度

4. SCrollbar参数

属性	中文	说明 & 常用值
Fill Rect	背景图	装饰轨道底色
Handle Rect	控制柄	拖控制柄 Image
Direction	方向	`LeftToRight` / `RightToLeft` / `TopToBottom` / `BottomToTop`
Value	当前位置	0-1 的百分比，0 代表起点，1 代表终点
Size	控制柄比例	0-1，表示可见区域 / 总长度（滚动条特有）
Number Of Steps	步数	0 = 连续；>0 = 离散滚动格数
OnValueChanged(float)	事件	拖动时回调，参数为当前 Value
Interactable	可交互开关	`false` 时禁止拖动，但脚本仍可改值
Transition / Navigation	同 Slider	见 Slider 章节

5. 常见用法

场景	做法简述
垂直文字滚动	`Direction = TopToBottom`，`Size = 0.2`，绑定 `ScrollRect`
水平地图滚动	`Direction = LeftToRight`，`Size = 0.3`，绑定 `ScrollRect`
时间轴滚动	`NumberOfSteps = 100`，让时间轴一格一格跳

6. 脚本控制示例

csharp 复制代码

using UnityEngine;
using UnityEngine.UI;

public class ScrollbarDemo : MonoBehaviour
{
    public Scrollbar scrollbar;   // 拖进来

    void Start()
    {
        // 初始位置 50%
        scrollbar.value = 0.5f;

        // 监听滚动事件
        scrollbar.onValueChanged.AddListener(OnScroll);
    }

    void OnScroll(float v)
    {
        Debug.Log("当前滚动位置：" + v);
    }
}

7. 一句话总结

Scrollbar 就是 "可拖动的滚动把手" ，用它 + ScrollRect 即可实现 文字、地图、时间轴 的平滑滚动；记住 Size 决定把手长度，Value 决定滚动位置即可。