Sometimes you may need to detect if the user has scrolled through the whole content of a text area. Let's say that only after the user scrolls to the bottom a button is enabled (like in most License Agreements). This is fairly easy to do but differ between Flex 3 and Flex 4 (Spark and Halo components).


For Flex 3 we simply bind to the verticalScrollPosition and maxVerticalScrollPosition of the textarea and wait until they are equal to make the button enabled.

Source
1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600">
2. <mx:TextArea width="200" height="100" id="textarea">
3. <mx:text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus quam egestas neque varius non ullamcorper arcu cursus. Nullam leo ipsum, interdum vitae viverra non, mollis ac odio. Phasellus ac justo et libero feugiat bibendum sit amet sed dui. Morbi non lectus eu lacus varius faucibus eget non nibh. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean molestie sollicitudin tincidunt. Quisque enim sem, hendrerit ac euismod vel, tempor id orci. Mauris lectus purus, ullamcorper ut pulvinar interdum, ullamcorper elementum nunc. Nunc orci nulla, condimentum at cursus vitae, viverra a odio. Donec vitae massa nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam mi sapien, volutpat in pellentesque nec, auctor eget lectus. Fusce ligula dolor, dapibus eu bibendum sit amet, mollis rhoncus justo. Pellentesque rutrum, arcu eget egestas tincidunt, augue ante elementum mauris, in bibendum lorem dui et purus. Nulla facilisi. Phasellus placerat neque id quam aliquet id volutpat arcu vestibulum. Proin vestibulum justo odio, vitae suscipit orci.</mx:text>
4. </mx:TextArea>
5. <mx:Button label="Click me" id="button" enabled="{textarea.verticalScrollPosition == textarea.maxVerticalScrollPosition}"/>
6. </mx:Application>
Generated by FlexWebFormater

For Flex 4 (Spark) the vertical scroll values are no longer bindable properties of the textarea, so we can not use binding anymore. What we can do is listen for the vertical scrollbar change event and check if the two values are equal.

Source
1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3. xmlns:s="library://ns.adobe.com/flex/spark"
4. xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
5.
6. <fx:Script>
7. <![CDATA[
8. import spark.components.VScrollBar;
9. private function creationComplete():void {
10. textarea.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change);
11. }
12.
13. private function list_verticalScrollBar_change(evt:Event):void {
14. var vsb:VScrollBar = evt.currentTarget as VScrollBar;
15. if (!vsb) return;
16. if (vsb.maximum == vsb.value) button.enabled = true;
17. else button.enabled = false;//Hide this line if you don't want to disable it afterwards
18. }
19.
20. ]]>
21. </fx:Script>
22.
23. <s:TextArea id="textarea" width="200" height="100" x="20" y="20" creationComplete="creationComplete()">
24. <s:text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus quam egestas neque varius non ullamcorper arcu cursus. Nullam leo ipsum, interdum vitae viverra non, mollis ac odio. Phasellus ac justo et libero feugiat bibendum sit amet sed dui. Morbi non lectus eu lacus varius faucibus eget non nibh. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean molestie sollicitudin tincidunt. Quisque enim sem, hendrerit ac euismod vel, tempor id orci. Mauris lectus purus, ullamcorper ut pulvinar interdum, ullamcorper elementum nunc. Nunc orci nulla, condimentum at cursus vitae, viverra a odio. Donec vitae massa nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam mi sapien, volutpat in pellentesque nec, auctor eget lectus. Fusce ligula dolor, dapibus eu bibendum sit amet, mollis rhoncus justo. Pellentesque rutrum, arcu eget egestas tincidunt, augue ante elementum mauris, in bibendum lorem dui et purus. Nulla facilisi. Phasellus placerat neque id quam aliquet id volutpat arcu vestibulum. Proin vestibulum justo odio, vitae suscipit orci. </s:text>
25. </s:TextArea>
26. <s:Button id="button" label="Click me" x="80" y="150" enabled="false"/>
27. </s:Application>
28.
Generated by FlexWebFormater

And there you have it, now your button is enabled only when the user has scrolled down through the whole textarea.