The VScrollBar (vertical ScrollBar) control and HScrollBar (horizontal ScrollBar) controls let the user control the portion of data that is displayed when there is too much data to fit in the display area.

Although you can use the VScrollBar control and HScrollBar control as stand-alone controls, they are usually combined with other components as part of a custom component to provide scrolling functionality. For more information, see Creating and Extending Adobe Flex 3 Components.

ScrollBar controls consists of four parts: two arrow buttons, a track, and a thumb. The position of the thumb and display of the buttons depends on the current state of the ScrollBar control. The width of the control is equal to the largest width of its subcomponents (arrow buttons, track, and thumb). Every subcomponent is centered in the scroll bar.

The ScrollBar control uses four parameters to calculate its display state:

• Minimum range value
• Maximum range value
• Current position; must be within the minimum and maximum range values
• Viewport size; represents the number of items in the range that can be displayed at once and must be equal to or less than the range

Creating a ScrollBar control

You define a ScrollBar control in MXML by using the <mx:VScrollbar> tag for a vertical ScrollBar or the <mx:HScrollBar> tag for a horizontal ScrollBar, as the following example shows. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

<?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 ScrollBar control 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>
The executing SWF file for the previous example is shown below:

Sizing a ScrollBar control

The ScrollBar control does not display correctly if it is sized smaller than the height of the up arrow and down arrow buttons. There is no error checking for this condition. Adobe recommends that you hide the ScrollBar control in such a condition. If there is not enough room for the thumb, the thumb is made invisible.

User interaction

Use the mouse to click the various portions of the ScrollBar control, which dispatches events to listeners. The object listening to the ScrollBar control is responsible for updating the portion of data displayed. The ScrollBar control updates itself to represent the new state after the action has taken place.