Wednesday, January 26, 2011

Animated Scrolling List

In Flex 4, the Spark List has a function called ensureIndexIsVisible(index). This function immediately scrolls the list to that index if it is not visible.

I've added a slight modification to this to animate the scrolling over half a second to make it much smoother. The animation is done using an AnimateProperty instance on the list's data group, and setting the property to verticalScrollPosition.

Here it is in action, as usual right click to view source:


For simplicity I am only scrolling the vertical scrollbar. If you are using a horizontal or tiled list, you'll want to animate the horizontal scrollbar too. In the tile case, you could use a Parallel instance to animate both the horizontal and vertical scrollbars.

3 comments:

DZONEMVB said...

Hi Chris,

I came across your blog, and greatly enjoyed reading it. After some consideration, we've concluded that your blog would be an ideal addition to our site, DZone.com.

We would like to invite you to participate in our Most Valuable Blogger program, which would allow our editors to occasionally syndicate entries from your blog under your DZone user profile. (If you haven't already, we would ask that you create a user profile to participate in the MVB program.) The program has provided a great way for many of our participants to drive extra traffic and visibility to their writings. Our site is actually home to several big names in the industry. You can see our complete list of MVB participants here:

http://www.dzone.com/page/mvbs

If you're interested in joining our MVB program, email me at: katie (at) dzone (dot) com.

Thank you for your consideration.

-Katie-

Content Curator, DZone.com

Anonymous said...

Thnk a lot buddy!

Anonymous said...

Great. Thx. You are the man.