VScrollBar（垂直の ScrollBar）コントロールおよび HScrollBar（水平の ScrollBar）コントロールを使用すると、データが多すぎて表示領域に収まらない場合に、表示される部分のデータを制御できます。

VScrollBar コントロールと HScrollBar コントロールをスタンドアローンのコントロールとして使用することもできますが、通常は、スクロール機能を実装したカスタムコンポーネントとして、他のコンポーネントと一体化されています。詳細については、『Adobe Flex 3 コンポーネントの作成と拡張』を参照してください。

ScrollBar コントロールは、2 つの矢印ボタン、1 つのトラックおよび 1 つのサムの合計 4 つのパーツで構成されます。サムの位置とボタンの表示は、ScrollBar コントロールの現在の状態に依存します。コントロールの幅は、サブコンポーネント（矢印ボタン、トラックおよびサム）の最大幅と同じになります。サブコンポーネントはすべて、スクロールバーの中央に配置されます。

ScrollBar コントロールでは、表示状態を計算するために次の 4 つのパラメータが使用されます。

• 範囲の最小値
• 範囲の最大値
• 現在の位置（最大値と最小値の範囲内）
• ビューポートのサイズ（上記の範囲内に一度に表示できるアイテム数。この範囲と等しいかそれ以下であること）

ScrollBar コントロールの作成

次の例に示すように、ScrollBar コントロールは、<mx:VScrollbar> タグ（垂直スクロールバーの場合）または <mx:HScrollBar> タグ（水平スクロールバーの場合）を使用して MXML 内で定義します。MXML で他の場所（別のタグ内または ActionScript ブロック内）にあるコンポーネントを参照する場合は、id 値を指定します。

<?xml version="1.0"?>
<!-- controls\bar\SBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

     <mx:Script>
        <![CDATA[
    
            import mx.events.ScrollEvent;
    
            // Event handler function to display the scroll location.
            private function myScroll(event:ScrollEvent):void {
                showPosition.text = "VScrollBar properties summary:" + '\n' +
                    "------------------------------------" + '\n' +
                    "Current scroll position: " + 
                    event.currentTarget.scrollPosition  + '\n' +
                    "The maximum scroll position: " + 
                    event.currentTarget.maxScrollPosition + '\n' +
                    "The minimum scroll position: " + 
                    event.currentTarget.minScrollPosition;
            }
        ]]>
    </mx:Script> 
  
    <mx:Label 
        width="100%" 
        color="blue" 
        text="Click on the scroll bar to view its properties."/>
        
    <mx:VScrollBar id="bar" 
        height="100%" 
        minScrollPosition="0" 
        maxScrollPosition="{this.width - 20}"
        lineScrollSize="50" 
        pageScrollSize="100"  
        repeatDelay="1000" 
        repeatInterval="500" 
        scroll="myScroll(event);"/>
          
    <mx:TextArea id="showPosition" 
        height="100%" width="100%" 
        color="blue"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ScrollBar コントロールのサイズ設定

ScrollBar コントロールは、上下の矢印ボタンよりも小さいサイズで表示しようとした場合、正しく表示されません。この状態に対するエラーチェック機構は存在しません。このような場合は、ScrollBar コントロールを非表示にすることをお勧めします。サムを表示するだけの領域がない場合、サムが非表示になります。

ユーザーの操作

マウスボタンで ScrollBar コントロールの各部分をクリックすると、リスナーに対してイベントが送出されます。ScrollBar コントロールのイベントを待機するオブジェクトによって、表示するデータの領域が更新されます。スクロール操作が実行されると、ScrollBar コントロールの表示が新しい状態を反映するように更新されます。