how to scroll two text boxes with single vertical scroll bar in Flex 3?

Question

how can i scroll two text boxes with single scroll bar?

Answer 1

You can try the following approach:

<mx:TextArea id="area1" verticalScrollPolicy="off" verticalScrollPosition="{area2.verticalScrollPosition}" />
<mx:TextArea id="area2" />

That way area2 will have a scrollbar and area1 won't. And these two areas will be scrolled together when user scrolls area2.

Answer 2

@Hrundik that is a good approach if the content and size of the text areas are equal, but if they are not this will give you run-time errors if the verticalScrollPosition of area2 is greater than area1's max. So I would create a function to handle this and check if area1.maxScrollPosition > area2.verticalScrollPosition before setting area1 scroll position.

another approach....

is this just a once and done or do you plan to reuse???

You can extent the textarea to take a target textarea as a paramater like so:

private var _target:TextArea;

public function set target(val:TextArea):void{
  _target = val;
}

then override the srollHandler function like so....

override protected function srollHandler(event:Event):void{

  super.scrollHandler(event);

  if(event is ScrollEvent && _target != null)
    _target.verticalScrollPosition = super.textField.scrollV - 1;

}

finally use like so....

<shua:TextAreaExtend text="{someText}" target="{myBuddy}"/>
<mx:Text id="myBuddy" />

but that might be over kill...ha

Answer 3

If the two scrolling controls are not the same height, you can still bind one to the other by getting and using the verticalScrollPosition as a percentage rather than an absolute.

Cheers