Question

I am building a Flex 4 application which uses a <s:Scroller> component to vertically scroll overflown content. Let me explain what happens before I ask my question:

1. The body of the page is loaded from a database
2. Once the information has loaded, the “body” of the application (in this case the list of items you see below) is constructed

3. Once the list is constructed, the entire encapsulating component is transitioned into view using TweenMax, like so:

   myComponent.visible = true;
   
   TweenMax.to(myComponent, 1, {
     alpha : 1,
     y -= 20 //Slides the component up 20px from its original location
   });
   

Below is the result. Notice how the scrollbar is scrolled the whole way down, but you can see the tips of a few white letters that were cut off at the very bottom.

Using my custom menu, I can navigate away from the page, and come back to it, and Flex will correctly recalculate the range of the scroller so I can scroll down and see all of the desired content. This issue only happens if the initial URL that the user enters is a longer page like this one.

Any ideas on how I can force Flex to recalculate the range of the scroller?

Thank you for your time.

Answer 1

Ok, after many hours of researching, piecing together, and trial and error here is what I came up with.

What I was doing wrong:

When I first posted this question, the “component” that I had mentioned was already added as a child element of the <s:Scroller>, but collapsed and hidden away, like this:

<comp:MyComp alpha="0" height="0" visible="false"/>

When the data would be loaded and the component’s visual appearance would be restored and transitioned into place, like this:

myComp.visible = true;
myComp.height = NaN;
myComp.invalidateSize();
myComp.height = myComp.measuredHeight;

TweenMax.to(myComp, 1, {
  alpha : 1,
  y -= 20 //Slides the component up 20px from its original location
});

This method of approach didn’t force the <s:Scroller> to recalculate its proper size until later, sometimes not until myComp was transitioned away and another component was transitioned into place using the same method. Even then, the size of the scroller would fit the size of the previous component, not the one that is currently displaying.

Now, what I am doing correctly:

My research showed me that anytime the addElement() method is called, either directly within the <s:Scroller> itself or by any of its children, the scroller’s measure() method is called, and properly re-sizes the scroller.

Instead of placing the components inside of the scroller and simply hiding them until I need them, I dynamically created them in ActionScript, set their properties, and added and removed them as needed using the addElement() and removeElement() methods respectively. Now, as old elements are transitioned away and new ones take their place, the scroller re-sizes itself correctly.

There was one final problem that I was faced with. If the very first page the user was viewing (i.e. there was no previous component that was transitioned away and destroyed) required a scroller, it wouldn’t show up.

I corrected this final issue by adding an event listener that listened for when the new component had finished transitioning into place. Inside of the event handler, I explicitly set the height of the component using this code:

newComp.height = NaN;
newComp.invalidateSize();
newComp.height = newComp.measuredHeight;

Now that the component has an explicit height, the scroller now appears, even if it is the first page.

The scroller now works as expected in all cases, and does not cut off any content or disappear when it shouldn’t.

I hope that it is helpful to someone.