Adding scrollbars to a mobile List component

I’m working on an AIR app that is meant for both desktop and mobile devices. ( No it’s not the 360|Flex app. I just used that as an example to help pimp the best developer conference in the world! )  I started with a Flex Mobile project but there are a few modifications that need to be made to some of the mobile components to accommodate the expected UX when using a mouse. The most obvious of which is scroll bars for the <s:List> component.

In a mobile app we don’t expect to see scroll bars except when actively scrolling. But with a mouse driven app we expect there to be scroll bars at all times if scrolling is an option.

Fortunately it is very simple to add scroll bars to something like the <s:List> component. All you need to do is set  interactionMode=”mouse”.

Actually it’s not that simple. That will give you a scroll bar with just the thumb visible. And it’s the mobile scroll bar thumb so it’s very thin. Not at all useful with a mouse. You’ll need to change the skinClass for the scroll bar as well.

The <s:List> ends up looking something like this:

<s:List
	id="list"
	width="100%" height="100%"
	labelField="name"
	interactionMode="mouse"
	creationComplete="{ list.scroller.verticalScrollBar.setStyle(
				'skinClass', skins.VScrollbar_skin ); }">

	<s:ArrayList>
		<fx:Object name="Brent Arnold" />
		<fx:Object name="Bryce Barrand" />
				.
				.
				.
	<s:layout>
		<s:VerticalLayout horizontalAlign="contentJustify" />
	</s:layout>

</s:List>

You can download an example app with the custom scrollbar skin here.

More information about mobile scroll bars

• flexponential > Controlling scroll bar visibility in a mobile Scroller
• help.adobe > Considerations when using scroll bars in a mobile application
• opensource.adobe > Mobile List, Scroller and Touch – Functional and Design Specification