AS3 Flex Scroller - Hide when not scrolling

Question

I'm trying to figure out how to make a Flex Scroller not be offset and to be hidden when the user is not scrolling. Basically, I'd like for the Scrollbar to appear and be overlapping the content when the user is scrolling and to then disappear or fade out when the user has stopped scrolling.

However, I've been unable to find any information online or any similar implementation on how to actually go about doing this. I'd appreciate it if someone could point me in the right direction.

Answer 1

Create a custom skinclass, inside that skin you add the following states:

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
    <s:State name="inactive" />
</s:states>

Once that is done, you have two buttons: TRACK and THUMB. Add this:

<!---  The default skin class is VScrollBarTrackSkin.  
        @copy spark.components.supportClasses.TrackBase#track 
        @see spark.skins.spark.VScrollBarTrackSkin -->
<s:Button id="track" top="0" bottom="0" height="54"
          focusEnabled="false"
          skinClass="com.happymetrix.client.mobile.components.uiLegacy.scroller.dark.DarkVScrollerTrackSkin"/>

<!--- The default skin class is VScrollBarThumbSkin.
        @copy spark.components.supportClasses.TrackBase#thumb 
        @see spark.skins.spark.VScrollBarThumbSkin -->
<s:Button id="thumb" 
          focusEnabled="false" visible.inactive="false"
          skinClass="com.happymetrix.client.mobile.components.uiLegacy.scroller.dark.DarkVScrollerThumbSkin" />

visible.inactive = "false"; Just try to play a bit with the custom skinclasses.