Programmatically scrolling a TextArea control in Flex

The following example shows how you can scroll a Flex TextArea control by setting the verticalScrollPosition and maxVerticalScrollPosition properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/26/programmatically-scrolling-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_verticalScrollPosition_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            private function init():void {
                callLater(setMaxVScrollPos);
            }

            private function setMaxVScrollPos():void {
                slider.maximum = textArea.maxVerticalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.html" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalScrollPosition:">
                <mx:HSlider id="slider"
                        minimum="0"
                        snapInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}"
            verticalScrollPosition="{slider.value}"
            verticalScrollPolicy="on"
            width="100%"
            height="100%"
            resize="init();" />

</mx:Application>

View source is enabled in the following example.

You can also set the verticalScrollPosition property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/26/programmatically-scrolling-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_verticalScrollPosition_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function init():void {
                callLater(setMaxVScrollPos);
            }

            private function setMaxVScrollPos():void {
                slider.maximum = textArea.maxVerticalScrollPosition;
            }

            private function slider_change(evt:SliderEvent):void {
                textArea.verticalScrollPosition = evt.value;
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.html" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalScrollPosition:">
                <mx:HSlider id="slider"
                        minimum="0"
                        snapInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}"
            verticalScrollPolicy="on"
            width="100%"
            height="100%"
            resize="init();" />

</mx:Application>

0 thoughts on “Programmatically scrolling a TextArea control in Flex

  1. Hi again Peter!

    A question regarding the scroll bar – is there a way to reference this at all? I see in the docs that the verticalScrollBar is protected…

    I have a chat application that sets:

    textArea.verticalScrollPosition = textArea.maxVerticalScrollPosition;
    

    after a user sends input to the chat, and this works great to force the scrolling down and therefore display the new line in the textArea. But if a person is scrolling through the text that is already there, and someone else sends something to the textArea, it snaps to the bottom of the chat (as expected) and therefore the scrolling user has lost where they were scrolling to.

    I want to add a eventListeners of mouseDown & mouseUp on the scroll bar, then set a boolean value if the mouse is being held down on the scroll bar or not – if it is, I know not to set the verticalScrollPosition of the textArea as the user is using the scroll bar at that moment.

    But textArea.verticalScrollBar.addEventListener(...) does not work with the error:

    Attempted access of inaccessible property verticalScrollBar through a reference with static type mx.controls:TextArea.

    I’ve tried using textArea.addEventListener(ScrollEvent.SCROLL, scrollHandler) but this fires repeatedly while scrolling. I could set the boolean to be true when this event fires, but then I have no way of knowing when to set it back to false.

    So, is there any way of doing this as the textArea control stands at the moment, or should I just stop complaining and extend the class to make verticalScrollBar public? ;-)

    Cheers,
    K.

  2. Thanks Peter.

    I thought as much – just checking if there was something I was missing…

    Cheers,
    K.

    PS Thanks for re-formatting my comment – I’ll try and not be so lazy next time! ;-)