Controlling scroll bar visibility in a mobile Scroller

The default behavior of scroll bars in a mobile Scroller is to always hide the scrollbars unless a touch scrolling operation is in effect. This post demonstrates how to customize this behavior so that the scroll bars are always visible. It also demonstrates how to have scrollbars automatically appear at startup then fade away after a short period of time.

The default behavior of a Scroller with interactionMode=”touch” is to hide the scroll bars except while a throw or drag scroll operation is in progress. There is currently no API to stop this auto hiding behavior. If you would like this behavior please vote for SDK-29296.

One way of getting the scroll bars to always be visible is to subclass VScrollBar/HScrollBar and override the setters for the alpha/visible/includeInLayout/scaleX/scaleY properties. Overriding alpha and visible might be obvious, but overriding includeInLayout/scaleX/scaleY can be a little confusing. This needs to be done because Scroller and ScrollerLayout operate on these properties while fading away the scroll bars.

Taking this idea a step further, we can now implement a behavior commonly seen on native iOS and Android applications: the scroll bars are shown initially at startup and then quickly fade away to signify that an area is scrollable. Flex doesn’t currently support this functionality (please vote for SDK-29299), but it can be accomplished by overriding the properties above and setting up an effect to animate the alpha after the scrollbars have been shown for a brief period of time.

Here is a sample Flex Mobile Project that demonstrates this code in action:

Note: This sample requires Flash Builder 4.5 and the final release build of Flex 4.5.

15 thoughts on “Controlling scroll bar visibility in a mobile Scroller”

  1. re: shown initially at startup, it might be cleaner (and more useful) to show the scrollbars when the amount of data available changes.

  2. @Tim – Good point. You should be able to do this by listening to the propertyChange events on the viewport and detecting when the size of the content becomes larger than the size of the viewport (viewport.contentHeight > viewport.height)

  3. Brilliant post. I used your solution to create a Scroller skin that’s always hidden (but can still scroll).

  4. Hi
    Got it working with other colors using a skinclass on the v & h Scroller.
    But I have a problem hidding it when verticalScrollPolicy is set to off. Any suggestions ?

  5. Hi! Thanks for this post, had problem with DropDownList scrollbars on Mobile. But after adding AlwaysVisible scrollbars to Scroller Skin they work as expected.

  6. Hi

    Nice article, thanks. I am creating a scrolling tabs component (as seen in Android 4). Is there any way to remove the scroll bars altogether, or hide them all the time? As they are getting in the way of it looking like the original in Android 4.

  7. Hi;
    I’m using Flex 4.6 and AIR SDK 3.9 for me above example not scrollbar Always visible is not working in mobile app.

Comments are closed.