Flex 4垂直滚动条（vertical Scroll Bar）居左-双Scroller

在实际开发中常常会遇到要把垂直滚动条 （verticalScrollBar）居左的情况，但是在Flex4中实现没有像Flex3中那么方便。Flex3只需重写容器的 validateDisplayList方法，再在方法里进行verticalScrollBar.x=0的设置；Flex4中本人至今没有找到一个比较 好的方法来解决此问题，只能先用一个看着比较纠结的方法了——双滚动条。

　　“双滚动条”的原理很简单。建一个轻量且与原容器“高度变化相同（用 绑定）”，宽度只须放得下垂直滚动条。新容器套上滚动条并放于原容器之上且居左。设置原容器verticalScrollPolicy="off"且 verticalScrollPosition="{新容器.verticalScrollPosition}"。这样一来原容器有的滚动条没有显示出 来，但它会和新容器一起滚动，因为verticalScrollPosition值进行了绑定，看上去就好像是垂直滚动条居左了。

例子代码如下:

<?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:HSlider id="slider" maximum="700" minimum="300" width="300"/>
	<s:Scroller id="hide_scroller" y="15" verticalScrollPolicy="off" horizontalScrollPolicy="off">
		<s:Group id="real_group" y="15" width="300" height="200"
				verticalScrollPosition="{fake_group.verticalScrollPosition}">
			<s:Rect id="rect" width="300" height="{slider.value}">
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="#DD0000"/>
						<s:GradientEntry color="#00DD00"/>
						<s:GradientEntry color="#0000DD"/>
					</s:LinearGradient>
				</s:fill>
			</s:Rect>
		</s:Group>
	</s:Scroller>
	<s:Scroller y="15" x="-15" id="show_scroller" horizontalScrollPolicy="off">
		<s:Group id="fake_group" y="15" width="15" height="{real_group.height}">
			<s:Group height="{rect.height}"/>
		</s:Group>
	</s:Scroller>
</s:Application>