How to add scrollbars to your Flex 4 Spark Application

There’s a couple places online that describe how to add scrollbars to your Spark application by using a custom Skin. There’s a lot of work to do that. Instead create a group or component (better) around your content and wrap that in a Scroller tag.

Before

<s:Application>
	... your application content here...
	<s:Image />
	<s:Label />
</s:Application>

After

<s:Application>
	<s:Scroller width="100%" height="100%">
		<s:Group>
			... your application content here...
			<s:Image />
			<s:Label />
		</s:Group>
	</s:Scroller>
</s:Application>

Or better yet (where ContentGroup contains the application content):

<s:Application>
	<s:Scroller width="100%" height="100%">
		<local:ContentGroup>
	</s:Scroller>
</s:Application>

I like the last method the most since I can set application specific preferences for the type of target platform, for example for mobile devices vs desktop browser, while keeping my main content group view agnostic.