| Package | ardisia.components.scroller |
| Class | public class Scroller |
| Inheritance | Scroller  spark.components.Scroller |
View the technical documentation on the Ardisia Labs website for more information.
Flex SDK Scroller Notes:
The Scroller and the H/VScrollBars work in tandem because both listen to property changes on the viewport. Therefore, if either change the viewport's scroll positions, both the Scroller and H/VScrollBar will update. This allows for some redundancy. For example, both have MouseWheelEvent listeners attached to (A) the skin for the Scroller, and (B) the viewport for the H/VScrollBar. More on this below.
Both call the viewport for the number of pixels to change the scroll in response to user interaction. The viewport will then call a function on the associated layout for the pixel delta to apply.
Despite the redundancy between the classes, the Scroller is primarily responsible for touch scrolling, all of the keyboard interaction, and the H/VScrollBar classes handle mouse interaction and animations.
Regarding animations, the H/VScrollBars have support for animation built in, but they choose to ignore it for single step operations. Animation support does exist for repeated stepping (holding down the increment button), paging, and jumping to a position on the scrollbar. The animations are so fast using the default "repeatInterval" and "repeastDelay" styles that it is easy to not notice that they are animated at all. Despite having animation support built in, it is very hard to customize because nearly all the animation code is private. The H/VScrollBar handle the animations alone without any interaction from the Scroller. In fact, the Scroller does not support any animation.
Both the Scroller and H/VScrollbar have MouseWheelEvent listeners. Both use the same redundant code and logic to handle wheel events. Whichever component receives the mouse wheel event (H/VScrollBar) will handle the scrolling and then call preventDefault() on the event to prevent the other components (Scroller) from changing the scroll when it receives the bubbling MouseWheelEvent.
The amount of wheel scroll is determined by the viewport/layout delta methods like other scrolling. However, wheel scrolling is also affected by the MouseWheelEvent "delta" property. The delta value is somewhat specific to the user's OS/Browser and may accelerate scrolling. Possible acceleration may occur if, as an example, the user keeps scrolling after an initial flick of the mouse wheel. The OS may determine that the user to trying to traverse a large list and provide increasing multiples of event.delta. This could be considered a good thing, but it can lead to frustration when a developer is trying to exert rigid control over the amount of scroll per wheel tick.
All the interlocking classes make dealing with scrolling complex. Code comments indicate a desire to completely rework the scrolling classes in a later Flex SDK release, most likely to fuse touch and mouse scrolling more effectively.
Default MXML Propertyviewport
| Property | Defined By | ||
|---|---|---|---|
| animationDuration : Number = 400
The milliseconds for each scroll animation. | Scroller | ||
| easer : IEaser
Easer to use for animations. | Scroller | ||
| mouseWheelEventDelta : int = 1
The number of steps to apply on each mouse wheel tick. | Scroller | ||
| mouseWheelStepSize : Number = 70
The number of pixels to scroll for each tick of the mouse wheel. | Scroller | ||
| scrollStepSize : Number
The number of pixels to scroll for each step. | Scroller | ||
| Method | Defined By | ||
|---|---|---|---|
dispose():void
Call to remove this element from the display list and remove
event listeners. | Scroller | ||
| Method | Defined By | ||
|---|---|---|---|
skinMouseWheelHandler(event:MouseEvent):void
Handles mouse wheel scrolling. | Scroller | ||
startAnimation(delta:Number):void
Start a scrolling animation. | Scroller | ||
| animationDuration | property |
public var animationDuration:Number = 400The milliseconds for each scroll animation. Applies to a mouse wheel initiated scrolling only.
The default value is 400.
| easer | property |
easer:IEaserEaser to use for animations.
The default value is Linear.
public function get easer():IEaser public function set easer(value:IEaser):void| mouseWheelEventDelta | property |
public var mouseWheelEventDelta:int = 1The number of steps to apply on each mouse wheel tick.
Set to 0 to use the value returned by the flash player.
Notes: Wheel scrolling is affected by the MouseWheelEvent "delta" property. The delta value is somewhat specific to the user's OS/Browser and may accelerate scrolling. Possible acceleration may occur if, as an example, the user keeps scrolling after an initial flick of the mouse wheel. The OS may determine that the user to trying to traverse a large list and provide increasing multiples of delta.
The default value of "1" makes each tick scroll the number of pixels set by the "mouseWheelStepSize" property.
The default value is 1.
| mouseWheelStepSize | property |
public var mouseWheelStepSize:Number = 70The number of pixels to scroll for each tick of the mouse wheel.
Note: this value will be multiplied by the "mouseWheelEventDelta" property to get the actual number of pixels to scroll. The default value of the "mouseWheelEventDelta" property is 1.
Set the value to 0 to use the default scroll delta (the delta returned by the viewport or layout). This may be desirable if the viewport has a specialized layout class that is returning a specific scroll value.
For example, a vertical List typically returns a delta that is equal to a multiple of renderer height. To use this value, set this property to 0.
The default value is 70.
| scrollStepSize | property |
scrollStepSize:NumberThe number of pixels to scroll for each step. Applies to both keyboard navigation as well as mouse events on the scrollbar thumbs.
Set the value to 0 to use the default scroll delta (the delta returned by the viewport or layout). This may be desirable if the viewport has a specialized layout class that is returning a specific scroll value.
For example, a vertical List typically returns a delta that is equal to a multiple of renderer height. To use this value, set this property to 0.
This property will be pushed down the vertical and horizontal scroll bars so they use this value when stepping.
This property is bindable and is bound to the "scrollStepSizeChanged" events.
The default value is 70.
This property can be used as the source for data binding.
public function get scrollStepSize():Number public function set scrollStepSize(value:Number):void| dispose | () | method |
public function dispose():voidCall to remove this element from the display list and remove event listeners.
| skinMouseWheelHandler | () | method |
protected function skinMouseWheelHandler(event:MouseEvent):voidHandles mouse wheel scrolling. Must be called before the superclass and the preventDefault() method called on the event to prevent other handlers, including the superClass, from processing the event.
Cancel the scroll by calling preventDefault() on the mouse wheel event.
Parameters
event:MouseEvent — the MouseEvent that triggered the handler
|
| startAnimation | () | method |
protected function startAnimation(delta:Number):voidStart a scrolling animation.
Parameters
delta:Number — the amount to change the property by
|