Flex Examples

The following example shows how you can use the verticalScrollPolicy property on a Flex VBox container to control the appearance of the vertical scroll bar when the container’s contents exceed the dimensions of the container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/09/setting-a-flex-containers-vertical-scroll-policy/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function updateScrollPosition():void {
                vSP.text = vBox.verticalScrollPosition.toString();
                mVSP.text = vBox.maxVerticalScrollPosition.toString();
            }
        ]]>
    </mx:Script>

    <mx:Style>
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="verticalScrollPolicy:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="auto" />
                            <mx:Object label="on" />
                            <mx:Object label="off" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="height:">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="300"
                        value="50"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="50" />
            </mx:FormItem>
            <mx:FormItem label="verticalScrollPosition:">
                <mx:Label id="vSP" />
            </mx:FormItem>
            <mx:FormItem label="maxVerticalScrollPosition:">
                <mx:Label id="mVSP" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VBox id="vBox"
            verticalScrollPolicy="{comboBox.selectedItem.label}"
            backgroundColor="haloSilver"
            width="200"
            height="200"
            updateComplete="updateScrollPosition();"
            creationComplete="updateScrollPosition();">
        <mx:Box id="box"
                backgroundColor="haloBlue"
                width="100%"
                height="{slider.value}" />
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.