Three posts in three days? Yeah, I’m that crazy.

This post is on how to set up a scrollbar that’s associated with a container, but not necessary part of (built-into) the container. For lack of a better term, it’s a standalone scrollbar. Let’s get right to it. View the sample here and right-click to view the source.

In the sample, I left the container’s built-in scrollbar so you could see how it affects and is affected by the standalone scrollbar. If you choose, you can remove the built-in scrollbar by setting the container’s horizontalScrollPolicy property to “off.”

One other important thing to notice is I’ve used binding for every relevant property except for setting the scrollbar’s maxScrollPosition. This is because Container’s maxHorizontalScrollPosition (and maxVerticalScrollPosition for that matter) property is not bindable. If you try to bind to it, you end up with a disabled scrollbar because its maxScrollPosition stays at 0. I personally consider this a bug in the Flex framework but either way just keep it in mind.

If you want to ditch binding altogether, there are two things you need to do:

(1) Every time your container dispatches an UPDATE_COMPLETE event, you need to set your scrollbar’s pageSize, scrollPosition, and maxScrollPosition properties. This is important because your container or its contents may change size. Also, something other than your scrollbar may be scrolling the container. Whatever changes might happen, we want to ensure the scrollbar reflects the container’s current view.

(2) Every time your scrollbar dispatches a SCROLL event, you need to set your container’s horizontalScrollPosition (or verticalScrollPosition) property. This is important because, well, you want your scrollbar to scroll your container.

Hope this saves someone some time. Enjoy!

Tags: horizontal scrollbar, HScrollBar, scroll container, ScrollBar, standalone, vertical scrollbar, VScrollBar