Determining if the scroll bars are visible in a Spark Scroller container in Flex 4

The following example shows how you can determine if the vertical and/or horizontal scroll bars are visible on a Spark Scroller container in Flex 4 by checking the verticalScrollBar or horizontalScrollBar skin part’s Boolean visible property.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/30/determining-if-the-scroll-bars-are-visible-in-a-spark-scroller-container-in-flex-4/ -->
<s:Application name="Spark_Scroller_verticalScrollBar_visible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="width:">
                <s:HSlider id="wSl"
                        minimum="100" maximum="400"
                        value="100"
                        change="wSl_changeHandler(event);"
                        changeEnd="wSl_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="height:">
                <s:HSlider id="hSl"
                        minimum="100" maximum="300"
                        value="100"
                        change="hSl_changeHandler(event);"
                        changeEnd="hSl_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function wSl_changeHandler(evt:Event):void {
                horFrmItm.required = scr.horizontalScrollBar.visible;
            }
 
            protected function hSl_changeHandler(evt:Event):void {
                verFrmItm.required = scr.verticalScrollBar.visible;
            }
        ]]>
    </fx:Script>
 
    <s:Panel horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <mx:Form paddingTop="0" paddingBottom="0">
                <mx:FormItem id="horFrmItm" label="horizontal scroll bar visible:" />
                <mx:FormItem id="verFrmItm" label="vertical scroll bar visible:" />
            </mx:Form>
        </s:controlBarContent>
        <s:Scroller id="scr"
                width="300" height="160">
            <s:Group>
                <s:Rect id="rect"
                        width="{wSl.value}" height="{hSl.value}">
                    <s:fill>
                        <s:LinearGradient rotation="45">
                            <s:GradientEntry color="haloGreen" />
                            <s:GradientEntry color="haloBlue" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:Scroller>
    </s:Panel>
 
</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

3 thoughts on “Determining if the scroll bars are visible in a Spark Scroller container in Flex 4

  1. I’d like to detect an event when the scrollbar is appearing. With this example, we only can test if the scrollbar is visible or not.
    When i click (and not drag) on the slider, the “required star” is not appearing because the test is done before the display (I guess).
    Is it possible to detect an event ?

  2. Phew – got it to work. I was using this example to update the minHeight property of my list, but thought it wasn’t working.

    Eventually I figured that I needed to set and unset the minHeight property based on the visible value, as my component was initially being drawn with zero height, so a one-way trigger didn’t work.

  3. hi peter,

    i want to know how prevent the vertical scroll bar of a spark list.I add item renderer in the list. I fix the height of item renderer but the list has no height.

    Thanks

Comments are closed.