Flex containers support scroll bars, which let you display an object that is larger than the available screen space or display more objects than fit in the current size of the container, as the following image shows:

In this example, you use an HBox container to let users scroll an image, rather than rendering the complete image at its full size:

<?xml version="1.0"?>
<!-- containers\intro\HBoxScroll.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox width="75" height="75">
        <mx:Image source="@Embed(source='assets/logo.jpg')"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you explicitly set the size of the HBox container to 75 by 75 pixels, a size smaller than the imported image. If you omit the sizing restrictions on the HBox container, it attempts to use its default size, which is a size large enough to hold the image.

By default, Flex draws scroll bars only when the contents of a container are larger than that container. To force the container to draw scroll bars, you can set the horizontalScrollPolicy and verticalScrollPolicy properties to on.

The following example creates an HBox container with scroll bars even though the image inside is large enough to display fully without them:

<?xml version="1.0"?>
<!-- containers\intro\HBoxScrollOn.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:HBox horizontalScrollPolicy="on" verticalScrollPolicy="on">
        <mx:Image source="@Embed(source='assets/logo.jpg')"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

Using container scroll properties

The following container properties and styles control scroll bar appearance and behavior:

• The horizontalScrollPolicy and verticalScrollPolicy properties control the display of scroll bars. By default, both properties are set to auto, which configures Flex to include scroll bars only when necessary. You can set these properties to on to configure Flex to always include scroll bars, or set the properties to off to configure Flex to never include scroll bars. In ActionScript, you can use constants in the ScrollPolicy class, such as ScrollPolicy.ON, to represent these values.
• The horizontalLineScrollSize and verticalLineScrollSize properties determine how many pixels to scroll when the user selects the scroll bar arrows. The verticalLineScrollSize property also controls the amount of scrolling when using the mouse wheel. The default value is 5 pixels.
• The horizontalPageScrollSize and verticalPageScrollSize properties determine how many pixels to scroll when the user selects the scroll bar track. The default value is 20 pixels.

Scroll bar layout considerations

Your configuration of scroll bars can affect the layout of your application. For example, if you set the horizontalScrollPolicy and verticalScrollPolicy properties to on, the container always includes scroll bars, even if they are not necessary. Each scroll bar is 16 pixels wide. Therefore, turning them on when they are not needed is similar to increasing the size of the right and bottom padding of the container by 16 pixels.

If you keep the default values of auto for the horizontalScrollPolicy and verticalScrollPolicy properties, Flex lays out the application just as if the properties are set to off. That is, the scroll bars are not counted as part of the layout.

If you do not keep this behavior in mind, your application might have an inappropriate appearance. For example, if you have an HBox container that is 30 pixels high and 100 pixels wide and has two buttons that are each 22 pixels high and 40 pixels wide, the children are contained fully inside the HBox container, and no scroll bars appear. However, if you add a third button, the children exceed the width of the HBox container, and Flex adds a horizontal scroll bar at the bottom of the container. The scroll bar is 16 pixels high, which reduces the height of the content area of the container from 30 pixels to 14 pixels. This means that the Button controls, which are 22 pixels high, are too tall for the HBox, and Flex, by default, adds a vertical scroll bar.

Controlling scroll delay and interval

Scroll bars have two styles that affect how they scroll:

• The repeatDelay style specifies the number of milliseconds to wait after the user selects a scroll button before repeating scrolling.
• The repeatInterval style specifies the number of milliseconds to wait between each repeated scroll while the user keeps the scroll arrows selected.

These settings are styles of the scroll bar subcontrol, not of the container, and, therefore, require a different treatment than properties such as horizontalScrollPolicy. The following example sets the scroll policy consistently for all scroll bars in the application:

<?xml version="1.0"?>
<!-- containers\intro\HBoxScrollDelay.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        HScrollBar, VScrollBar {
            repeatDelay: 2000;
            repeatInterval:1000;
        }
    </mx:Style>

    <mx:HBox id="hb1" width="75" height="75">
        <mx:Image source="@Embed(source='assets/logo.jpg')"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example results in the same scrollable logo as shown in Using scroll bars, but the scroll bars behave differently. When the user clicks and holds the mouse button down over any of the scroll bar arrows or the scroll bar track, the image initially scrolls once, waits two seconds, and then scrolls at a rate of one line or page a second.

To set a style on a single scroll bar, use a line such as the following in the event listener for the initialize event for the application or the control with the scroll bar:

ScrollBar(hb1.horizontalScrollBar).setStyle("repeatDelay", 2000);

In this case, hb1 is an HBox control. All containers have horizontalScrollBar and verticalScrollBar properties that represent the container's ScrollBar subcontrols, if they exist. You must cast these properties to the ScrollBar class, because their type is the IScrollBar interface, not the ScrollBar class.