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.

<?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.

 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

One Response to Setting a Flex container’s vertical scroll policy

  1. VivD says:

    May not be related to this post exactly but how should I code if I want to refresh load more data into a list once the user scrolls to the bottom of the current set of loaded data.
    I basically call an api to fetch 20 items and show it in a list. If user scrolls to the bottom, i’d like to bring up more data. Kind of a continuous scrolling feature.
    Note: This is for a mobile device in case it matters.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree