Smooth Scrolling Flex List
Smooth scrolling is a pretty common request for the List component in Flex. Flex Team engineer Alex Harui provided a working, albeit unofficial, example a while back. Michael Ritchie recently ported that example to HorizontalList. I’ve been sitting on some code for a while now and Michael’s tweet on the topic convinced me to finally post my take on the subject.
While in San Francisco for Adobe MAX last November, I volunteered to help out another team from Universal Mind on a project. The task I was assigned was to make a smooth scrolling List. The List had to support variable row heights, which meant Alex’s implementation wasn’t an option. The List also had to support drag and drop, which meant writing my own list component from scratch wasn’t feasible either. I was basically left with only one option: cheat. What I ended up doing was to create a List that would ensure that it was always tall enough to create and show all of its renderers. Wrapping that in a Canvas would then simulate smooth scrolling by utilizing the Canvas’s scroll mechanism instead of the List’s.
Check out the demo (view source enabled) or go straight to the source.
It would obviously be a bad idea to use this if your dataProvider had a ton of items in it, but for most use cases it should work pretty well. The code is pretty straightforward and heavily commented so I won’t rehash everything here. If you have questions feel free to post a comment.
Enjoy!
You can leave a response, or trackback from your own site.
Dude… you’re right… that is SOOO cheating
Here’s an example of ours. It does the same thing of re-using item renderers so it can handle long lists with complex item renderers.
There’s still some further features we could add in the future and some further optimizations, but it fills our requirements for the meantime (we’ve even sold it on a couple of times), so get away from the bad user experience default Flex list.
You can see an example here (and I’ve edited it a little giving the option to extend the scrollRect so you can see the item renderers outside of the usual visible area), no source though sorry
.
Very cool Tink! Though now I am going to have to figure out how you did it and copy your idea.
Hi Ben,
Wonderful implementation. Trying to implement I had to change the paddingBottom to “-2″ to pick up all of my itemRenderers (not sure why) and it works fine except for load for load. During the initial load of the dataProvider it’s very jumpy and takes a few seconds for the ScrollBar to take the correct position. However, after refreshing the data the second time, it works very smoothly.
Any ideas on where I should be looking to make the initial load a little less “rigid”.
Cheers!
Hi Ben,
thx for this great post,
See Ben, as you know we can use the repeater component to get this “Smooth Scrolling”, but the probleme whene we use the repeater component we lost big part of the application performence.. so Adobe propose the List component to get the perfect perfermence with the visualisation of logue and big data..
But your component have the same performance as a repeater component,
plz test your component perfermence and you will see this “error”..
Karim.
Hi Karim,
I think I made it pretty clear that this component is only useful for small data sets. It wasn’t my intention to create a full fledged smooth scrolling List component, just to implement the specific functionality needed for a project.
Thanks,
Ben
Arg, this is exactly like using a VBox + repeater as there is no renderer recycling. ( I know you are aware of that ). But what’s the point? I would even prefer to use the repeater approach as it’s much simpler and ligher.
Hopefully Flex4 will provide a fully featured List with smooth scrolling.
Hi Alex,
This approach gets you drag and drop capabilities, a Repeater does not.
Thanks,
Ben
Three things:
1. This is awesome. Thank you!
2. My tests suggest that item renderers ARE, in fact, recycled… Your experience has been different?
3. I’ve noticed if I add items to the list, the scrollbar gets smaller as the list gets longer. However, if I remove items from the list, the scrollbar doesn’t resize, and the list doesn’t get any shorter (whitespace is left where the removed items used to be)… Any thoughts?
Thanks!
-Rich
wrt #3 above, I found the problem. Replace:
combinedRendererWidth += columnWidth;
with:
if(renderer!=null)
combinedRendererWidth += columnWidth;
Cheers
1. Thanks, you’re welcome.
2. Not sure how/why they would, but I didn’t verify it either way.
3. Cool, glad you got it working.
Hm thats not smooth scrolling, it’s scrolling.
If it would be animated, than, it would be smooth, this is just a step back.
You’re obviously not familiar with the List component in Flex, because if you were you’d know it scrolls one item at a time. It cannot be smoothly transitioned, or transitioned at all really, to display part of an item renderer. If this component were animated, *then* it would be animated. Animation is not the same thing as smooth scrolling.
My suggestion to you is to take the time you currently spend leaving snide, inaccurate and poorly written comments and invest it in some grammar lessons. To start you can learn the difference between then and than, and go easy on the commas. Good luck with that.
Ben,
have you ever been able to port something like this to a tile list? It’s a great component and scrolls very smoothly (though not according to some apparently ha ^). It’s a real pain to be honest, as the lack of smooth scrolling is probably something that Adobe should have dealt with quite some time ago officially, and in a lot of cases it is a real giveaway that flex has been used to create an app or website.
Thanks,
Conor
No need,
I actually just changed the extension in Alex’s component and made it extend TileList instead of List.
Thanks again for this component,
Conor