Home > Flex 4 Examples > Flex 4 Vertical Scroll Speed

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>
Advertisements
Categories: Flex 4 Examples
  1. July 7, 2011 at 12:01 PM

    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

  2. buddy
    August 30, 2011 at 12:25 AM

    Thanks Russ and Dingo!
    Actually both of u helped me out of this Scrolling Prob.

  3. Jim
    September 4, 2011 at 2:35 AM

    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

  4. Sacha
    January 19, 2012 at 3:04 AM

    Thank you very much this was very helpful

  5. Doahh
    October 12, 2012 at 4:42 AM

    Fantastic, thanks very much. Worked first time as soon as I used it.

  6. Prasanna
    March 4, 2013 at 3:07 AM

    It works fine with IE. But not with chrome and firefox.

    Any clues?

  7. March 5, 2013 at 3:02 AM

    Between all the experiments to make my app work the way it was required, this one worked flawlessly!
    Many thanks!

  8. yougen
    April 23, 2013 at 9:00 PM

    nice work!

  1. June 8, 2011 at 7:30 AM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: