5 Replies Latest reply on Jul 27, 2010 1:51 AM by Natorion

    How to scroll to a nested control programatically?



      A nested control lies within a Container (Panel, Canvas, etc). The nested control's Container lies too within an Container and so on. Several of this containers have ScrollBars. Now I want to scroll all this Containers that my Control is on screen. How do I do it? I have tried working with the vertical/horizontalScrollPosition property in combination with contentToLocal etc but it does not work. What exactly does the value of horizontalScrollPosition tells me? I do not get the meaning of the description. The used SDK is flex 3.2.


      Best regards,


        • 1. Re: How to scroll to a nested control programatically?

          I am not very clear with your requirement.

          Regarding horizontalScrollPosition, it tells you the start position of you horizontal scroll bar

          which is by default zero and increases as you move the bar to right.

          • 2. Re: How to scroll to a nested control programatically?
            Natorion Level 1

            Thanks for the reply.


            Ad requirements:


            1.) a control inside a Container

            2.) this Container is inside a Container too

            3.) the Container's Container may be in a Container too

            4.) I want to scroll to the control in 1.) so it is displayed on screen.

            5.) to achieve this generically I need to scroll the whole Container hierarchy


            Ad horizonatal/verticalScrollPosition


            Yeah, this much I figured out. The description says "The current position of the vertical scroll bar. This is equal to the distance in pixels between the top edge of the scrollable surface and the topmost piece of the surface that is currently visible." but what is the meaning of the second sentence? How do the Container's content, the scrollbar and the maxScrollPos of the scrollbar correlate?

            • 3. Re: How to scroll to a nested control programatically?
              NickDF__ Level 1

              so, you want to scroll where the control is in order to be able to see it?


              If so, then you need to find out where your Scroller component is (if you're using Flex 4). After you find all you have to do is something like this.


              scroller.horizontalScrollBar.value = control.x


              This the case with the new Scroller component in Flex 4. In Flex 3, its a whole other story.



              Edit - sorry, I've just noticed you mentioned the sdk you're using.

              • 4. Re: How to scroll to a nested control programatically?
                Natorion Level 1

                Thanks, any tips how to do it in Flex 3?

                • 5. Re: How to scroll to a nested control programatically?
                  Natorion Level 1

                  I now tried an approach inspired/copied from http://www.darylb.net/flexautoscroll/srcview/index.html





                  private function ensureVisibiltyNewY(control:DisplayObject):void {

                  if (control == null) {

                  var currentParent:DisplayObjectContainer = control.parent;

                  if (control.parent == null) {

                  var topContainer:Container = currentParent as Container;

                  if (topContainer == null) {

                  var topEdge:int = control.y;
                  var thisItem : DisplayObjectContainer = control.parent;
                  while(thisItem != topContainer) {
                  topEdge += thisItem.y;
                  thisItem = thisItem.parent;
                  var bottomEdge : int = topEdge + control.height;

                  if (topContainer.verticalScrollBar == null) {

                  var scrollbarRange : int = topContainer.verticalScrollBar.maxScrollPosition;

                  var visibleWindowHeight : int = topContainer.height;
                  //trace( " visibleWindowHeight:" + visibleWindowHeight );

                  var lastVisibleY : int = visibleWindowHeight + topContainer.verticalScrollPosition;
                  if(topContainer.horizontalScrollBar) {
                  // remove the horiz scrollbar height from lastVisibleY
                  lastVisibleY -= topContainer.horizontalScrollBar.height;
                  //trace( ", lastVisibleY=" + lastVisibleY );
                  //trace( ", focusBottomEdge-lastVisibleY=" + (focusBottomEdge-lastVisibleY) );
                  //trace( ", focusTopEdge=" + focusTopEdge );

                  if( topEdge == topContainer.verticalScrollPosition ) {
                  //trace( "Bar not moved, already at top edge of focus item." );
                  else if( topEdge < topContainer.verticalScrollPosition ) {
                  topContainer.verticalScrollPosition = topEdge;
                  //trace( "Moved bar up to " + focusTopEdge );
                  else if( bottomEdge-lastVisibleY > 0 ) {
                  var newPos : int = Math.min(scrollbarRange, topContainer.verticalScrollPosition + (bottomEdge-lastVisibleY));
                  topContainer.verticalScrollPosition = newPos;
                  //trace( "Moved bar down to " + newPos );
                  else {
                  //trace( "Bar not moved." );;







                  Unfortunatly it does not work either :/