Flex 4 Vertical Scroll Speed
By default, scrolling content when using the Scroller component occurs very slowly – Even down to 1px per event.
Try running the following example:
<?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" minWidth="955" minHeight="600"> <s:Scroller width="100%" height="100%"> <s:Group width="100%" height="100%"> <s:Group width="100%" height="100%"> <s:VGroup width="100%" height="100%" horizontalAlign="center"> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> </s:VGroup> <s:layout> <s:VerticalLayout paddingBottom="100" paddingLeft="100" paddingRight="100" paddingTop="100"/> </s:layout> </s:Group> </s:Group> </s:Scroller> </s:Application>
In order to bring scrollable content using a Scroller up to normal web standards (say 50px or 100px per event) with a setup like the above, you have to override the VScrollbar and assign a custom skin to the scroller that uses the override.
The overridden vertical scrollbar:
package
{
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 VScrollBar extends spark.components.VScrollBar
{
public function VScrollBar()
{
setStyle("movementDelta", 50);
}
override mx_internal function mouseWheelHandler(event:MouseEvent):void
{
var viewport:IViewport = this.viewport;
if ( viewport == null || !viewport.visible || event.isDefaultPrevented() )
return;
var delta:Number = event.delta;
var direction:int = (event.delta > 0) ? -1 : (event.delta < 0) ? 1 : 0;
var movement:Number = getStyle("movementDelta");
viewport.verticalScrollPosition += movement * direction;
event.preventDefault();
}
}
}
The Skin Class:
<?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" >
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Scroller")]
]]>
</fx:Metadata>
<fx:Script>
<![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>
<local:VScrollBar id="verticalScrollBar" visible="false" />
<s:HScrollBar id="horizontalScrollBar" visible="false" />
</s:SparkSkin>
And the modified application using the skinclass. Notice the scrolling speeds with and without the skin that uses the override.
<?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" minWidth="955" minHeight="600"> <s:Scroller width="100%" height="100%" skinClass="Whatever"> <s:Group width="100%" height="100%"> <s:Group width="100%" height="100%"> <s:VGroup width="100%" height="100%" horizontalAlign="center"> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> <s:Label text="I need to be scrolled, man!" height="50"/> </s:VGroup> <s:layout> <s:VerticalLayout paddingBottom="100" paddingLeft="100" paddingRight="100" paddingTop="100"/> </s:layout> </s:Group> </s:Group> </s:Scroller> </s:Application>
Advertisement
Categories: Flex 4 Examples
Thanks Russ!
I’ve been stuck for a long time with a problem that vertical scrolling did not work well in certain circumstances. I used the proposed approach with intermediate Group between the scroller and the vgroup together with the custom skin and problem solved.
Thanks again!
Dinko
Thanks Russ and Dingo!
Actually both of u helped me out of this Scrolling Prob.
How can I scroll this on a mouse.y position , Would like it to scroll on the mouse Y position and not use scrollbars.
Thanks
Jim
Thank you very much this was very helpful