Flex 控制 滚动条 速度

方式一：

<?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:myTigerTI="myControl.*"
   xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" creationComplete="application1_creationCompleteHandler(event)">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Label{
fontSize:25;
fontFamily:"微软雅黑";
color:#ffffff;
}
</fx:Style>

<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.effects.Tween;
import mx.events.FlexEvent;
import mx.events.FlexMouseEvent;
[Bindable]
public var strPersent:Number;//缩放比例

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
this.currentState='normal';
strPersent=Capabilities.screenResolutionX/1680;
}

protected function mainScroller_mouseWheelChangingHandler(event:FlexMouseEvent):void
{
event.preventDefault();
var modifier:int = 50;
var delta:Number = Number(event.delta) * modifier;
var viewport:IViewport = mainScroller.viewport;
var vPos:Number = viewport.verticalScrollPosition;
var maximum:Number = mainScroller.maximum;

if (delta < 0) 
{
mainScroller.viewport.verticalScrollPosition =  Math.min(vPos - delta, maximum) ;        
}
else
{
mainScroller.viewport.verticalScrollPosition = Math.max(vPos - delta, 0);
}
}

]]>
</fx:Script>
<s:states>
<mx:State name="normal"/>
<mx:State name="detailState"/>
</s:states>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<s:SolidColorStroke id="myStroke" alpha="0.3" color="#ffffff"/>
</fx:Declarations>
<s:BorderContainer width="100%" height="100%" borderVisible="false">
<s:VGroup id="vgContent" width="100%" height="100%" horizontalAlign="center">
<!-- 背景1 -->
<s:BorderContainer id="bc1" width="100%" borderVisible="false">
<!-- logo -->
<s:Image id="img1" source="assets/tiger/bac11.png" includeIn="normal" width="100%" scaleMode="stretch"/>
<s:Image id="img1_about" source="assets/tiger/about/bac11.png" includeIn="detailState" width="100%" scaleMode="stretch"/>
<s:Image source="assets/tiger/logo.png" width="114" height="60" left="50" top="20"/>
<s:Label text="泰格教育" left="180" top="50"/>
<!-- 导航栏 -->
<s:HGroup height="60" gap="20" verticalAlign="middle" right="50" top="30">
<s:Label id="lbl1" text="关于我们" click="currentState = (currentState == 'normal') ? 'detailState' : 'normal';lbl1.text=(lbl1.text=='关于我们') ? '首页' : '关于我们';" buttonMode="true" mouseOver="{lbl1.setStyle('color','#FFD700')}" mouseOut="{lbl1.setStyle('color','#ffffff')}"/>
<s:Image source="assets/tiger/space.gif" height="30" width="5"/>
<s:Label id="lbl2" text="在线测试" buttonMode="true" mouseOver="{lbl2.setStyle('color','#FFD700')}" mouseOut="{lbl2.setStyle('color','#ffffff')}"/>
<s:Image source="assets/tiger/space.gif" height="30" width="5"/>
<!--<s:Label id="lbl3" text="登陆" buttonMode="true" click="lbl3_clickHandler(event)" mouseOver="{lbl3.setStyle('color','#FFD700')}" mouseOut="{lbl3.setStyle('color','#ffffff')}"/>-->
<s:Image id="imgLogin" source="assets/tiger/login.png" height="100%" buttonMode="true"/>
</s:HGroup>
<!-- 白线 -->
<s:Line xFrom="0" xTo="{bc1.width}" yFrom="100" yTo="100" stroke="{myStroke}"/>
<!-- 托福与雅思图片 -->
<s:TileGroup includeIn="normal" width="100%" bottom="100" requestedColumnCount="2" requestedRowCount="1" verticalAlign="middle" horizontalAlign="center" columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight">
<myTigerTI:tigerTI sourceImg="assets/tiger/toefl.png"/>
<myTigerTI:tigerTI sourceImg="assets/tiger/ielts.png"/>
</s:TileGroup>
</s:BorderContainer>
<!-- 背景2 -->
<s:BorderContainer width="100%" borderVisible="false">
<s:Image source="assets/tiger/bac22.png" includeIn="normal" width="100%" scaleMode="stretch"/>
<s:Image source="assets/tiger/about/bac22.png" includeIn="detailState" width="100%" scaleMode="stretch"/>
<s:TileGroup includeIn="detailState" width="100%" bottom="100" requestedColumnCount="3" requestedRowCount="1" verticalAlign="middle" horizontalAlign="center" columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight">
<s:Image source="assets/tiger/about/img1.png" width="{357*strPersent}" height="{320*strPersent}" scaleMode="stretch"/>
<s:Image source="assets/tiger/about/img2.png" width="{357*strPersent}" height="{320*strPersent}" scaleMode="stretch"/>
<s:Image source="assets/tiger/about/img3.png" width="{357*strPersent}" height="{320*strPersent}" scaleMode="stretch"/>
</s:TileGroup>
</s:BorderContainer>
<!-- 背景3 -->
<s:BorderContainer width="100%" borderVisible="false">
<s:Image source="assets/tiger/bac33.png" includeIn="normal" width="100%" scaleMode="stretch"/>
<s:Image source="assets/tiger/about/bac33.png" includeIn="detailState" width="100%" scaleMode="stretch"/>
</s:BorderContainer>
<!-- 背景4 -->
<s:BorderContainer width="100%" borderVisible="false">
<s:Image source="assets/tiger/bac44.png" includeIn="normal" width="100%" scaleMode="stretch"/>
<s:Image source="assets/tiger/about/bac44.png" includeIn="detailState" width="100%" scaleMode="stretch"/>
</s:BorderContainer>
<!-- 背景5 -->
<s:BorderContainer width="100%" borderVisible="false" includeIn="normal">
<s:Image id="img5" source="assets/tiger/bac55.png" width="100%" scaleMode="stretch"/>
</s:BorderContainer>
</s:VGroup>
<s:VScrollBar id="mainScroller" viewport="{vgContent}" height="100%" right="0" mouseWheelChanging="mainScroller_mouseWheelChangingHandler(event)"/>
</s:BorderContainer>
</s:Application>

方式二：

新建VScrollBar的子类MyVScrollerBar.as：

package myAs

{

 import flash.events.MouseEvent;    

 import mx.core.mx_internal;

 import spark.components.VScrollBar;

 import spark.core.IViewport;

 

 use namespace mx_internal;

 

 [Style(name="movementDelta", inherit="yes", type="number", format="length")]

 

 public class MyVScrollerBar extends VScrollBar

 {

  public function MyVScrollerBar()

  {

   setStyle("movementDelta", 30);

  }

 

  override mx_internal function mouseWheelHandler(event:MouseEvent):void

  {

   var viewport:IViewport = this.viewport;

   if ( viewport == null || !viewport.visible || event.isDefaultPrevented() )

    return;

   var direction:int = (event.delta > 0) ? -1 : (event.delta < 0) ? 1 : 0;

   var movement:Number = getStyle("movementDelta");

   viewport.verticalScrollPosition += movement * direction;

   event.preventDefault();

  }

 }

}

新建外观类MyVScrollerBarSkin：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark" 
 xmlns:myAs="myAs.*">
<fx:Metadata>
<![CDATA[ 
[HostComponent("spark.components.Scroller")]
]]>
</fx:Metadata> 

<fx:Script>

<![CDATA[    
override public function beginHighlightBitmapCapture() : Boolean
{
var needUpdate:Boolean = super.beginHighlightBitmapCapture();
graphics.beginFill(0);
graphics.drawRect(0, 0, width, height);
graphics.endFill();

return needUpdate;
}

override public function endHighlightBitmapCapture() : Boolean
{
var needUpdate:Boolean = super.endHighlightBitmapCapture();
graphics.clear();
return needUpdate;
}
]]>

</fx:Script>
<myAs:MyVScrollerBar id="verticalScrollBar" visible="false" />
<s:HScrollBar id="horizontalScrollBar" visible="false" />
</s:SparkSkin>

引用：

<?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">

<s:Scroller width="400" height="400" skinClass="skins.MyVScrollerBarSkin">
<s:Group width="100%" height="100%">
<s:Rect width="100%" height="1200">
<s:fill>
<s:SolidColor color="0x338899"/>
</s:fill>
</s:Rect>
</s:Group>
</s:Scroller>
</s:Application>

方式三：

<s:Scroller width="100%" height="100%" visible="true" mouseWheelChanging="{event.delta = event.delta>0?60:-60;}">