SkinnableContainer Scrollbar und MouseWheel

[falconry]

Ich habe bei Adobe gefunden, wie ich einen Skinnable COntainer mit Scorllbars ausstatte.
Das funktioniert auch echt toll, bis ich mit dem Mausrad nach unten scollen wollte. Die Scrollbar hüpft eigentlich nur nach unten und oben. So stelle ich mir scrollen nicht vor.

Ich werd mit den Sparkdingern noch verrückt, echt. Mit den Halos ging alles recht einfach. Aber ich möchte gerne Sparks einsetzen und suche eben hierfür auch eine Lösung.

In meinem Beispiel habe ich eine recht lange ArrayCollection und wenn ihr mit der Devided Box spielt, dann gibts auch eine Scrollbar in Barchart. Bewegt man dann das Mousewheel, so spring die Scrollbar.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   backgroundColor="0x666666"
			   width="100%" height="100%">
	<fx:Declarations>
		<!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
	</fx:Declarations>
	
	<s:layout><s:VerticalLayout /></s:layout>
	
	<fx:Script>
		<![CDATA[
			[Bindable] public var chartDP:Array = [
				{day:'Monday',rainfall:10,elevation:100,temperature:78},
				{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
				{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
				{day:'Thursday',rainfall:8,elevation:60,temperature:84},
				{day:'Friday',rainfall:11,elevation:390,temperature:52},
				{day:'Saturday',rainfall:12,elevation:790,temperature:45},
				{day:'Sunday',rainfall:14,elevation:1220,temperature:24},
				{day:'Monday',rainfall:10,elevation:100,temperature:78},
				{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
				{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
				{day:'Thursday',rainfall:8,elevation:60,temperature:84},
				{day:'Friday',rainfall:11,elevation:390,temperature:52},
				{day:'Saturday',rainfall:12,elevation:790,temperature:45},
				{day:'Sunday',rainfall:14,elevation:1220,temperature:24},
				{day:'Monday',rainfall:10,elevation:100,temperature:78},
				{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
				{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
				{day:'Thursday',rainfall:8,elevation:60,temperature:84},
				{day:'Friday',rainfall:11,elevation:390,temperature:52},
				{day:'Saturday',rainfall:12,elevation:790,temperature:45},
				{day:'Sunday',rainfall:14,elevation:1220,temperature:24}
			];		
		]]>
	</fx:Script>
	<s:VGroup>
		<mx:VDividedBox width="100%" height="100%">
			<mx:DataGrid dataProvider="{chartDP}" />

			<s:SkinnableContainer skinClass="RoundShadowScroller"
								  width="100%" height="100%">
				
			
			<mx:BarChart id="myChart" dataProvider="{chartDP}" height="500" width="100%" >
				<mx:verticalAxis>
					<mx:CategoryAxis dataProvider="{chartDP}"
									 categoryField="day" />
				</mx:verticalAxis>
				<mx:series>
					<mx:BarSeries yField="day" xField="rainfall" displayName="day" />
				</mx:series>
			</mx:BarChart>
			
			</s:SkinnableContainer>
			
		</mx:VDividedBox>
		<mx:Legend dataProvider="{myChart}" />
	</s:VGroup>
	
	
</s:Application>

Und hier ist die SkinClass:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.SkinnableContainer")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>
	
	<!-- DropShadow -->
	<s:Rect left="5" right="5" top="5" bottom="5" radiusX="10" radiusY="10" width="100%" height="100%">
		<s:filters>
			<s:DropShadowFilter
				blurX="20" blurY="20"
				alpha="0.32"
				distance="11"
				angle="90"
				knockout="false" />
		</s:filters>
		<s:fill>
			<s:SolidColor color="0xFFFFFF" />
		</s:fill>
	</s:Rect>
	
	<!-- layer 1 border 
	<s:Rect left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10">
	<s:stroke>
	<s:SolidColorStroke color="0x000000" weight="1" />
	</s:stroke>
	</s:Rect>
	--> 
	<!-- Layer 2 Background
	<s:Rect id="background" left="5" right="5" top="5" bottom="5" radiusX="10" radiusY="10">
	<s:fill>
	<s:SolidColor id="bgFill" color="0xffffff" />
	</s:fill>
	</s:Rect>
	--> 
	<s:Scroller left="10" right="10" top="10" bottom="10" width="100%" height="100%"
				measuredSizeIncludesScrollBars="true"
				>
		
	
		<s:Group id="contentGroup" left="10" right="10" top="10" bottom="10">
			<s:layout>
				<s:VerticalLayout />
			</s:layout>
		</s:Group>
	</s:Scroller>
	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	-->
</s:Skin>

Habt ihr ne Lösung?

Danke
Falconry