ScrollBar和ScrollView
1. ScrollBar屬性詳解

Interactable ： Will this component accept input? 是否可用
Transition ： Properties that determine the way the control responds visually to user actions. 狀態變化（詳解參考Button）
Navigation ： Properties that determine the sequence of controls. 熱鍵關聯
Handle Rect ： The graphic used for the sliding “handle” part of the control. 操作區域（滑塊 ）
Direction ： The direction in which the Scrollbar’s value will increase when the handle is dragged.The options are Left To Right,Right To Left,Bottom To Top and Top To Bottom. 方向
Left To Right 從左往右
Right To Left 從右往左
Bottom To Top 從下往上
Top To Bottom 從上往下
Value ： Initial position value of the Scrollbar,in the range 0.0 to 1.0. 滑動條的值
Size ： Fractional size of the handle within the Scrollbar,in the range 0.0 to 1.0. 滑塊的尺寸
Number Of steps ： The number of distinct scroll positions. 分節數量
On Value Changed ： A UnityEvent that is invoked when the current value of the Scrollbar changes. The event can send the value as a float type dynamic argument. 事件

2. ScrollView 中的 Scroll Rect屬性詳解

Content ： This is a reference to the Rect Transform of the UI element to be scrolled,for example a large image. 內容顯示區
Horizontal ： Enables horizontal scrolling 水平滑動
Vertical ： Enables vertical scrolling 垂直滑動
Movement Type ： Unrestricted,Elastic or Clamped.Use Elastic or Clamped to force the content to remain within the bounds of the Scroll Rect. Elastic mode bounces the content when it reaches the edge of the Scroll Rect. 移動型別
Elastic ： 回彈模式 (移動到底後回回彈)
Clampes ： 夾子模式（移動到底不會回彈）
Elasticity ： This is the amount of bounce used in the elasticity mode. 回彈模式的，回彈量。
Inertia When Inertia is set the content will continue to move when the pointer is released after a drag. When Inertia is not set the content will only move when dragged. 慣性
Deceleration ： Rate When Inertia is set the deceleration rate determines how quicky the contents stop moveing.A rate of 0 will stop the movement immediately. A value of means the movement will never slow down. 減速率
0 立刻停止。
1永不停止。
Viewport ： Reference to the viewport Rect Transform that is the parent of the content Rect Transform. 內容顯示區域
Horizontal Scrollbar ： Optional reference to a horizontal scrollbar element. 水平滾動條
Visiblity ： Whether the scrollbar should automatically be hidden when it isn’t needed,and optionally expand the viewport as well. 是否可見
Permanent 一直可見
Auto Hide 自動隱藏
Auto Hide And Expand Viewport 自動隱藏和擴充套件滾動條。

Spacing ： The space between the scrollbar and the viewport. 滾動條和內容顯示區域的距離
Vertical Scrollbar ： Optional reference to a vertical scrollbar element. 垂直滾動條
On Value Changed ： A UnityEvent that is invoked when the scroll position of the Scroll Rect changes. The event can send the current scroll position as a Vector2 type dynamic argument. 事件

3. ScrollView 中的 Mask屬性詳解

Show Graphic ： Should the graphic of the masking(parent) object be drawn with alpha over the child object? 顯示圖片。
4. ScrollBar使用詳解
新增Scrollbar GameObject或者在GameObject 中新增Scrollbar指令碼。如果想要限制滑塊的滑動次數。將Number Of Steps設定成想要的值。例如設定成3，滑塊只能拖動3次。設定成0和1 都是沒有效果，設定成2，則一下到底，或者一下到頂。
設定如圖

如果要用滑鼠滾輪控制滑塊，則需要在Scrollbar中繫結如下程式碼。

例子：超長圖片的顯示
設定好Scrollbar，新增顯示區視窗，在顯示區視窗新增Scroll Rect指令碼和Mask指令碼

image新增圖片，scrollrect繫結content，繫結scrollbar

設定width,height，最終效果如下圖

例子：多個控制元件的顯示
設定好Scrollbar，新增顯示區視窗，在顯示區視窗新增Scroll Rect指令碼和Mask指令碼
scrollrect繫結content，繫結scrollbar

content 顯示區物件添加布局指令碼，這裡用的是Grid Layout Group
設定好Padding ,內邊距，Cell Size ，子控制元件的大小，Spacing，外邊距。
解釋下Grid Layout Group

Padding ： The padding inside the edges of the layout group. 內邊距
Cell Size ： The size to use for eache layout element in he group. 子控制元件的大小
Spacing ： The spacing between the layout elements. 外邊距
Start Corner ： The corner where the first element is located. 開始位置
Upper Left 左上
Upper Right 右上
Lower Left 左下
Lower Right 右下
Start Axis ： Which primary axis to place elements along.Horizontal will fill an entire row before a new row is started. Vertical will fill an entire column before a new column is started. 排列方向
Horizontal 水平
Vertical 垂直
Child Alignment ： The alignment to use for the layout elements if they don’t fill out all the available space. 子控制元件對齊方式
Upper Left 左上
Upper Center 中上
Upper Right 右上
Middle Left 左中
Middle Center 正中
Middle Right 右中
Lower Left 左下
Lower Center 中下
Lower Right 右下
Constraint ： Constraint the grid to a fixed number of rows or columns to aid the auto layout system. 約束條件
Flexible 自動
Fixed Column Count 固定列數
Fixed Row Count 固定行數

在顯示區物件下，新增多個image.

效果如
5. ScrollView的使用詳解

ScollView 控制元件下右三個組成部分，Viewport 檢視,Scrollbar Horizontal ,水平滾動條， Scrollbar Vertical ，垂直滾動條。也就是說製作ScrollView要有1 滑動條，2檢視，指令碼1.scroll Rect ，2 mask，3 Grid Layout Group，4 Scrollbar 。有了這些就可以製作想要的ScrollView。這些指令碼的設定參考上一步。
例子：遊戲裡玩家排行彈窗
首先設定ScrollView
想的是手機端，所以去掉了滑動條。玩家數量是動態變化的，content的大小也該跟這變化，所以添加了Content Size Fillter指令碼，實現Content 大小的動態變化，解釋下 Content Size Fitter。

Horizontal Fit ： How the width is controlled. 寬度適配
Vertical Fit ： How the Height is controlled. 高度適配
None/Unconstrained ： Do not drive the width/height based on the minimum width/height of the layout element. 不調整
Minimum/Min Size ： Drive the width/height based on the minimum width/height of the layout element. 根據子控制元件中最小的寬或 高度，子控制元件數量 調整顯示區大小。
Preferred/Preferred ： Size Drive the width/height based on the preferred width/height of the layout element. 根據Grid Layout Group 中Cell Size 和 Spacing的值，子控制元件的數量， 調整顯示區的大小。
Content Size Fitter 設定如下

調整Mask大小

其次自定義item

這裡說下UGUI 的層級問題，NGUI 中層級是由 Panel 和控制元件中的 depth來控制，而 UGUI中石油Canvas和GameObject渲染的先後順序。
Canvas 是同一個渲染模式下，由sort order的值決定的。

其他子控制元件，直觀的來看就是場景中Game Object的排列順序，越往後越靠上如圖所示

然後設定背景，調整canvas層級

最後新增程式碼，動態新增item
彈出主體程式碼如下

Item程式碼如下

在彈窗主體中繫結 content 的transform，和item預製體

最終效果如下圖