Scroller control

The Scroller control is part of the Spark component set. There is no MX equivalent.

The Scroller control contains a pair of scroll bars and a viewport. A viewport displays a rectangular subset of the area of a component, rather than displaying the entire component. You can use the Scroller control to make any container that implements the IViewport interface, such as Group, scrollable.

The scroll bars control the viewport's vertical and horizontal scroll position. They reflect the viewport's actual size and content size. Scroll bars are displayed according to the Scroller's vertical and horizontal scroll policy properties. By default, the policy is set to "auto". This value indicates that scroll bars are displayed when the content within a viewport is larger than the actual size of the viewport.

For more information on using this control with Spark containers, see Scrolling Spark containers.

Creating a Scroller control

You define a Scroller control in MXML by using the <s:Scroller> tag. 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.

In the following example, the Group container myGroup is the viewport for this scroller. The content in the viewport is the loaded image. The layout of the application is controlled by the VGroup container.

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\Scroller\ScrollerImage.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="450" height="450">
    <s:VGroup paddingLeft="10" paddingTop="10">
        <s:Scroller width="400" height="400">
            <s:Group id="myGroup" >
                <s:Image id="loader1" 
                          source="@Embed(source='../assets/strawberries.jpg')"/> 
            </s:Group>
        </s:Scroller>
        <s:Label 
            fontSize="14" fontFamily="Arial"
            text= "Scroll to see fresh summer strawberries"/>
    </s:VGroup>    
</s:Application>

The executing SWF file for the previous example is shown below:

Sizing a Scroller control

You can size the width and height of the Scroller control directly or size the viewport container. The VScrollBar and HScrollBar classes bind to the viewport's scroll position and actual and content sizes.

Skinning a Scroller control

The Scroller skin provides scroll bars and manages layout according to the verticalScrollPolicy and horizontalScrollPolicy properties in the Scroller class.

The Scroller skin layout cannot be changed because it must handle the vertical and horizontal scroll policies. Scroller skins can only provide replacement scroll bars.