How do I programmatically scroll to the bottom of a mx:TextArea in Flex?

Question

Consider the following mx:TextArea ..

<mx:TextArea id="textArea"/>

.. periodically being updated with new lines of text using ..

textArea.text += newLineBeingAdded + "\n";

.. how do I make sure the textarea is scrolled down to the bottom so that the last line added is visible to the user?

Answer 1

I don't know of a way to do this explicitly with the Halo TextArea, but the Spark TextArea has a scrollToRange method that may be of use to you in this context. Another way to approach this if you don't want to use Spark components is to use a Halo List component and add each of your new lines as a new item in the List's data provider. After each addition to the data provider you can call scrollToIndex on the List to ensure the new item is visible. Hope that helps.

Answer 2

after adding text set

callLater(scrollToEnd);

....

function scrollToEnd():void {
   textArea.verticalScrollPosition = int.MAX_VALUE;
}

and it should scroll to the end.

Even better than callLater would be to use invalidateProperties/commitProperties.

Answer 3

Put the cursor at the end of the text. That should also scroll to show the cursor:

textArea.selectionBeginIndex =  textArea.text.length;
textArea.selectionEndIndex =  textArea.text.length;