flex s:Scroller纵向滚动条 增加sparkSkin，添加到css样式表

s:Scroller纵向滚动条 增加sparkSkin，添加到css样式表，横向滚动条与此类似。

css文件中添加：

s|Scroller

{
skinClass:ClassReference("window.view.skin.scrollerSkin.ScrollerSkin");

}

window.view.skin.scrollerSkin目录下6个文件如下

ScrollerSkin.mxml文件：

<?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:mx="library://ns.adobe.com/flex/mx"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009">


<fx:Metadata>
<![CDATA[ 
/** 
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Scroller")]
]]>
</fx:Metadata> 

<fx:Script fb:purpose="styling">
<![CDATA[    
/**
*  @private
*/
override public function beginHighlightBitmapCapture() : Boolean
{
var needUpdate:Boolean = super.beginHighlightBitmapCapture();

// Draw an opaque rect that fill our entire skin. Our background
// is transparent, but we don't want focus/error skins to
// poke through.  This is safe to do since we don't have any 
// graphic elements as direct children.
graphics.beginFill(0);
graphics.drawRect(0, 0, width, height);
graphics.endFill();
return needUpdate;
}

/**
*  @private
*/
override public function endHighlightBitmapCapture() : Boolean
{
var needUpdate:Boolean = super.endHighlightBitmapCapture();

// Clear the rect we drew in beginBitmapCapture();
graphics.clear();
return needUpdate;
}
]]>
</fx:Script>

<!---  A vertical scrollbar that lets you control the portion of data that is displayed 
when there is too much data to fit vertically in a display area.
The Scroller determines whether the vertical ScrollBar is visible. -->
<s:VScrollBar id="verticalScrollBar" visible="false" skinClass="window.view.skin.scrollerSkin.ScrollerVScrollBarSkin" />

</s:SparkSkin>

ScrollerVScrollBarSkin.mxml 文件:

<?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:mx="library://ns.adobe.com/flex/mx"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5"
alpha.inactive="0.5">


<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="inactive" />
</s:states>

<fx:Metadata>
<![CDATA[ 
[HostComponent("spark.components.VScrollBar")]
]]>
</fx:Metadata> 


<s:Button id="track" top="12" bottom="12" right="0" width="12" focusEnabled="false" horizontalCenter="0"
 skinClass="window.view.skin.scrollerSkin.ScrollerTrackSkin" 
 />
<s:Button id="thumb" focusEnabled="false" horizontalCenter="0" right="0" left="0"
 skinClass="window.view.skin.scrollerSkin.ScrollerThumbSkin" 
 />
<s:Button id="decrementButton" top="0"  focusEnabled="false" horizontalCenter="0" right="0" width="12"
 skinClass="window.view.skin.scrollerSkin.ScrollerUpButtonSkin" 
 />
<s:Button id="incrementButton" bottom="0"  focusEnabled="false" horizontalCenter="0" right="0" width="12"
 skinClass="window.view.skin.scrollerSkin.ScrollerDownButtonSkin" 
 />
</s:SparkSkin>


ScrollerTrackSkin.mxml文件：
<?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:mx="library://ns.adobe.com/flex/mx">

<!-- host component -->
<fx:Metadata>
<![CDATA[ 
/** 
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>

<fx:Script >
<![CDATA[         
/* Define the skin elements that should not be colorized. 
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];

/** 
* @private
*/     
override public function get colorizeExclusions():Array {return exclusions;}

/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}  

/**
*  @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
}

private var cornerRadius:Number = 2;

]]>        
</fx:Script>

<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- border/fill -->
<s:Rect top="0" bottom="0" horizontalCenter="0" minWidth="12" minHeight="35" alpha="0.5" >
<s:stroke>
<s:SolidColorStroke color="#0631A6" weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#4078CF" />
</s:fill>
</s:Rect>
</s:SparkSkin>


ScrollerThumbSkin.mxml文件：
<?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:mx="library://ns.adobe.com/flex/mx" 
xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
<fx:Metadata>
<![CDATA[ 
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>

<fx:Script fb:purpose="styling">
<![CDATA[         
static private const exclusions:Array = ["labelDisplay"];

override public function get colorizeExclusions():Array {return exclusions;}

override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}  

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
}

private var cornerRadius:Number = 2;
]]>        
</fx:Script>

<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect horizontalCenter="0" top="1"  bottom="1" minWidth="12" minHeight="14">
<s:stroke>
<s:SolidColorStroke color="#0558BC" color.over="#0631A6" weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#4682B4" />
</s:fill>
</s:Rect>
</s:SparkSkin>


ScrollerUpButtonSkin.mxml文件：
<?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:mx="library://ns.adobe.com/flex/mx" alpha.disabled="0.5" 
width="16" height="14"
buttonMode="true"
useHandCursor="true">

<!-- host component -->
<fx:Metadata>
<![CDATA[ 
/** 
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>

<fx:Script>
<![CDATA[         
/* Define the skin elements that should not be colorized. 
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];

/** 
* @private
*/     
override public function get colorizeExclusions():Array {return exclusions;}

/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}  

/**
*  @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
}

private var cornerRadius:Number = 2;
]]>        
</fx:Script>

<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:BitmapImage source="@Embed('assets/images/arrow_forward.png')"/>
</s:SparkSkin>


ScrollerDownButtonSkin.mxml文件：
<?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:mx="library://ns.adobe.com/flex/mx" alpha.disabled="0.5" 
width="16" height="14"
buttonMode="true"
useHandCursor="true">

<!-- host component -->
<fx:Metadata>
<![CDATA[ 
/** 
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>

<fx:Script>
<![CDATA[         
/* Define the skin elements that should not be colorized. 
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];

/** 
* @private
*/     
override public function get colorizeExclusions():Array {return exclusions;}

/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}  

/**
*  @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
}

private var cornerRadius:Number = 2;
]]>        
</fx:Script>

<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:BitmapImage source="@Embed('assets/images/arrow_backward.png')"/>
</s:SparkSkin>

两个图片：
assets/images/arrow_backward.png

assets/images/arrow_forward.png

滚动条效果如下：

注：应用文件中需加载相应的样式文件

例：StyleManager.getStyleManager(null).loadStyleDeclarations("assets/***.swf");//加载皮肤

欢迎纠错！