スクロールバー(Scrollbar)とは
スクロールバー(Scrollbar)は、一定範囲内で連続的な値を制御・表示するためのUIコンポーネントです。
スライダー(Slider)と似ていますが、スクロールバーは「コンテンツの表示範囲の移動」に特化したUIです。
- スクロールバー(Scrollbar)の主な特徴
| 特徴 | 内容 |
|---|---|
| ハンドルのサイズ変更対応 | 表示可能領域に応じてハンドルの大きさが変わる（≠ Slider） |
| 値の範囲指定可能 | value, size, numberOfSteps などで範囲や精度を制御 |
| 水平方向・垂直方向対応 | Direction で LeftToRight / TopToBottom などを指定可能 |
| UI ScrollRectと連動可能 | ScrollRect コンポーネントと組み合わせることで、スクロールビュー制御に使用可能 |
| イベント通知機能あり | 値の変化に応じて onValueChanged が呼ばれる |
- スクロールバー(Scrollbar)の主な用途
| 用途 | 具体例 |
|---|---|
| スクロールビューの補助 | ScrollRect と連携して、縦横スクロールを視覚的に制御 |
| テキストエリアのスクロール | 長文表示領域で現在の表示位置をユーザーに知らせたり移動させたりする |
| 数値や進捗の可視化 | ゲージ・進捗バーとして代用（カスタマイズ次第で応用可能） |
| ステップ付き選択 | numberOfSteps を使って「段階付きスクロールバー」も実現可能 |
スクロールバー(Scrollbar)を構成するオブジェクト
Scrollbar
└── Sliding Area
└── Handle| オブジェクト名 | 機能カテゴリ | 役割 |
|---|---|---|
| Slider | 本体 | スクロール値や方向、イベント管理を行う。 Imageコンポーネントと、Sliderコンポーネントを持つ。 |
| Sliding Area | ハンドルの稼働領域 | Handle の位置を制限する領域。 通常は RectTransform の操作で制御される。 |
| Handle | 入力・表示 | ユーザーがドラッグする部分。 スクロール値に応じて位置が変化し、サイズも変動する。 Imageコンポーネントを持つ。 |
Imageコンポーネントについては、下記の記事で詳しく解説しているので参照してください。
スクロールバー(Scrollbar)の基本的な使い方
スクロールバー(Scrollbar)を使用するには、UI要素を配置するためのCanvasが必要です。
もし、シーンにCanvasが無い場合は、Canvasを作成してください。
キャンバス(Canvas)の作成：
「ヒエラルキー(Hierarchy)」ウィンドウを右クリック⇒UI⇒キャンバス(Canvas)
を選択してCanvasを作成します。
スクロールバー(Scrollbar)の作成：
「ヒエラルキー」ウィンドウのCanvasオブジェクトを右クリック⇒UI⇒スクロールバー(Scrollbar)
を選択してScrollbarをCanvasに追加します。
Scrollbarコンポーネントでは以下の項目を設定できます。
- Interactable
- 遷移 (Transition)
- ナビゲーション (Navigation)
- 可視化 (Visualize)
- Handle Rect
- 向き (Direction)
- 値 (Value)
- サイズ (Size)
- ステップ数 (Number Of Steps)
- 値の変更時 (Single) (On Value Changed (Single))
順番に解説していきます。
Interactable
スクロールバー(Scrollbar)がユーザー操作を受け付けるかどうかを制御するプロパティです。
詳細は、Button (Legacy)の記事で解説していますので、そちらを参照してください。
遷移 (Transition)
スクロールバー(Scrollbar)の状態（通常／ホバー／クリック／無効）に応じて、見た目を変える仕組みです。
詳細は、Button (Legacy)の記事で解説していますので、そちらを参照してください。
ナビゲーション (Navigation)
キーボード・ゲームパッドなどの入力デバイスを使って UI を移動（フォーカス）するための制御機能です。
詳細は、Button (Legacy)の記事で解説していますので、そちらを参照してください。
可視化 (Visualize)
Inspector の Navigation セクション右上に表示される Visualize ボタンをクリックすると、
Sceneビューに「矢印（Arrow）」が表示され、他のUIへのナビゲーション接続が見えるようになります。
これは、キーボードやゲームパッドによるUI移動経路を直感的に確認するためのデバッグツールです。
Handle Rect
Scrollbar の中でユーザーが操作する「つまみ（ハンドル）」に相当する RectTransform を指定するプロパティです。
この「ハンドル」は、スクロール量に応じて位置が動いたり、内容量に応じてサイズが変わったりします。
デフォルトではSliding Areaの子オブジェクトであるHandleオブジェクトが指定されています。
- 主な機能
| 機能項目 | 内容 |
|---|---|
| 表示 | 現在のスクロール位置を示す視覚的なインジケーター |
| 操作 | ユーザーがドラッグやクリックで直接スクロール位置を操作できる UI 要素 |
| サイズ変化 | size プロパティに応じてハンドルのサイズが自動的に変更される（可変幅） |
| 値との連動 | value の変化によりハンドルの位置が動く |
向き (Direction)
スクロールバーのハンドル（Handle）が動く方向、およびスクロールの値が変化する方向を決定するプロパティです。
- 選択可能な向きの種類
| 値（列挙体） | 表示と操作の方向 |
|---|---|
| 左から右 (Left To Right) | 値が小 ⇒ 大になるほど、ハンドルが左 ⇒ 右へ進む |
| 右から左 (Right To Left) | 値が小 ⇒ 大になるほど、右 ⇒ 左へ進む（反転） |
| 下から上 (Bottom To Top) | 値が小 ⇒ 大になるほど、下 ⇒ 上へ進む（縦型） |
| 上から下 (Top To Bottom) | 値が小 ⇒ 大になるほど、上 ⇒ 下へ進む（縦型の反転） |
値 (Value)
現在のスクロール位置を 0.0 ～ 1.0 の範囲で表す float 型のプロパティです。
- 値の範囲と意味
| 値 (Value) | 意味 |
|---|---|
| 0.0 | スクロールの開始位置（先頭） |
| 0.5 | 中央付近の位置 |
| 1.0 | スクロールの終了位置（末尾） |
サイズ (Size)
スクロールバー上の「ハンドル（Handle）」の表示サイズを割合（0〜1）で指定するプロパティです。
- 値の範囲と意味
| サイズ (Size)の値 | ハンドルの大きさ | 意味 |
|---|---|---|
| 0.1 | 非常に小さい | 表示領域は全体の 10%、スクロール可能範囲が大きい |
| 0.5 | トラックの半分の大きさ | 表示領域は全体の 50%（残り半分はスクロール可能） |
| 1.0 | 最大（トラック全体と同じ） | スクロール不要（全内容が表示されている） |
- ScrollRect との連携
ScrollRect に Scrollbar を接続した場合、サイズは自動で設定されます。
ステップ数 (Number Of Steps)
スクロールバーの値（value）を離散的なステップ単位で動かすかどうかを制御するプロパティです。
- 動作イメージ
| ステップ数 | valueの値 |
|---|---|
| 0（デフォルト） | 連続値（例：0.12345、0.678など） |
| 5 | 0.0, 0.25, 0.5, 0.75, 1.0（5段階） |
| 10 | 0.0 ～ 1.0 を 10 等分（= 11ステップ） |
値の変更時 (Single) (On Value Changed (Single))
スクロールバーの値（value）が変化したときに自動的に呼び出される UnityEvent（イベント） です。
public void OnScrollbarValueChanged(float value)
{
Debug.Log("現在のスクロール値: " + value);
}
コメント