The Scroller component displays a single scrollable component,
called a viewport, and horizontal and vertical scroll bars.
The viewport must implement the IViewport interface. Its skin
must be a derivative of the Group class.

The Spark Group, DataGroup, and RichEditableText components implement
the IViewport interface and can be used as the children of the Scroller control,
as the following example shows:

The size of the Image control is set larger than that of its parent Group container.
By default, the child extends past the boundaries of the parent container.
Rather than allow the child to extend past the boundaries of the parent container,
the Scroller specifies to clip the child to the boundaries and display scroll bars.

Not all Spark containers implement the IViewPort interface.
Therefore, those containers, such as the BorderContainer and SkinnableContainer containers,
cannot be used as the direct child of the Scroller component.
However, all Spark containers can have a Scroller component as a child component.
For example, to use scroll bars on a child of the Spark BorderContainer,
wrap the child in a Scroller component.

To make the entire BorderContainer scrollable, wrap it in a Group container.
Then, make the Group container the child of the Scroller component,
For skinnable Spark containers that do not implement the IViewport interface,
you can also create a custom skin for the container that
includes the Scroller component.

The IViewport interface defines a viewport for the components that implement it.
A viewport is a rectangular subset of the area of a container that you want to display,
rather than displaying the entire container.
The scroll bars control the viewport's horizontalScrollPosition and
verticalScrollPosition properties.
scroll bars make it possible to view the area defined by the viewport's
contentWidth and contentHeight properties.

You can directly set properties on the component wrapped by the Scroller by
using the Scroller.viewport property.
For example, you can modify the viewport's horizontalScrollPosition and
verticalScrollPosition properties.

To directly access the scroll bar instances, either HScrollBar or VScrollBar,
created by the Scroller, use the Scroller.horizontalScrollBar and
Scroller.verticalScrollBar properties.

You can combine scroll bars with explicit settings for the container's viewport.
The viewport settings determine the initial position of the viewport,
and then you can use the scroll bars to move it, as the following example shows:

The scroll bars are displayed according to the vertical and horizontal scroll bar
policy, which can be auto, on, or off.
The auto policy means that the scroll bar will be visible and included
in the layout when the viewport's content is larger than the viewport itself.

The Scroller skin layout cannot be changed. It is unconditionally set to a
private layout implementation that handles the scroll policies. Scroller skins
can only provide replacement scroll bars. To gain more control over the layout
of a viewport and its scroll bars, instead of using Scroller, just add them
to a Group and use the scroll bar viewport property
to link them together.

A flag that indicates whether this object can receive focus
via the TAB key
This is similar to the tabEnabled property
used by the Flash Player.
This is usually true for components that
handle keyboard input, but some components in controlbars
have them set to false because they should not steal
focus from another component like an editor.

[read-only]
A convenience method for determining the unscaled width
of the component
All of a component's drawing and child layout should be done
within a bounding rectangle of this width, which is also passed
as an argument to updateDisplayList().

Indicates whether the security restrictions
would cause any display objects to be omitted from the list returned by calling
the DisplayObjectContainer.getObjectsUnderPoint() method
with the specified point point.

Measures the specified HTML text, which can contain HTML tags such
as <font> and <b>,
assuming that it is displayed
in a single-line UITextField using a UITextFormat
determined by the styles of this UIComponent.

A utility method to update the rotation, scale, and translation of the
transform while keeping a particular point, specified in the component's
own coordinate space, fixed in the parent's coordinate space.

Validates the measured size of the component
If the LayoutManager.invalidateSize() method is called with
this ILayoutManagerClient, then the validateSize() method
is called when it's time to do measurements.

Dispatched by the drag initiator (the component that is the source of the data being dragged) when the drag operation completes, either when you drop the dragged data onto a drop target or when you end the drag-and-drop operation without performing a drop.

Dispatched when the user presses two points of contact over the same InteractiveObject instance on a touch-enabled device (such as presses and releases two fingers over a display object on a mobile phone or tablet with a touch screen).

Dispatched when the user moves a point of contact over the InteractiveObject instance on a touch-enabled device (such as moving a finger from left to right over a display object on a mobile phone or tablet with a touch screen).

Dispatched when the user performs a rotation gesture at a point of contact with an InteractiveObject instance (such as touching two fingers and rotating them over a display object on a mobile phone or tablet with a touch screen).

Dispatched when the user performs a swipe gesture at a point of contact with an InteractiveObject instance (such as touching three fingers to a screen and then moving them in parallel over a display object on a mobile phone or tablet with a touch screen).

Dispatched when the user creates a point of contact with an InteractiveObject instance, then taps on a touch-enabled device (such as placing several fingers over a display object to open a menu and then taps one finger to select a menu item on a mobile phone or tablet with a touch screen).

Dispatched when the user performs a zoom gesture at a point of contact with an InteractiveObject instance (such as touching two fingers to a screen and then quickly spreading the fingers apart over a display object on a mobile phone or tablet with a touch screen).

Dispatched when the user moves an active stylus over this InteractiveObject from outside the object's tree of descendents in the display list (while remaining within the proximity detection threshold of the screen).

Dispatched when a user releases the button on the pointing device after the user first pressed the button over an InteractiveObject instance and then moved the pointing device off of the InteractiveObject instance.

Dispatched when the user moves the point of contact away from InteractiveObject instance on a touch-enabled device (such as drags a finger from one display object to another on a mobile phone or tablet with a touch screen).

Dispatched when the user moves the point of contact over an InteractiveObject instance on a touch-enabled device (such as drags a finger from a point outside a display object to a point over a display object on a mobile phone or tablet with a touch screen).

Dispatched when the user moves the point of contact away from an InteractiveObject instance on a touch-enabled device (such as drags a finger from over a display object to a point outside the display object on a mobile phone or tablet with a touch screen).

Dispatched when the user moves the point of contact over an InteractiveObject instance on a touch-enabled device (such as drags a finger from a point outside a display object to a point over a display object on a mobile phone or tablet with a touch screen).

Dispatched when the user lifts the point of contact over the same InteractiveObject instance on which the contact was initiated on a touch-enabled device (such as presses and releases a finger from a single point over a display object on a mobile phone or tablet with a touch screen).

Styles are either common or associated with a specific theme. If the style is common, it can be used with any theme. If a style is associated with a specific theme, it can only be used if your application uses that theme.

For the Spark theme, see
flashx.textLayout.formats.ITextLayoutFormat.color.

For the Mobile theme, if using StyleableTextField,
see spark.components.supportClasses.StyleableTextField Style color,
and if using StyleableStageText,
see spark.components.supportClasses.StyleableStageText Style color.

For the Spark theme, see
flashx.textLayout.formats.ITextLayoutFormat.fontFamily.

For the Mobile theme, if using StyleableTextField,
see spark.components.supportClasses.StyleableTextField Style fontFamily,
and if using StyleableStageText,
see spark.components.supportClasses.StyleableStageText Style fontFamily.

The default value for the Spark theme is Arial.
The default value for the Mobile theme is _sans.

For the Spark theme, see
flashx.textLayout.formats.ITextLayoutFormat.fontSize

For the Mobile theme, if using StyleableTextField,
see spark.components.supportClasses.StyleableTextField Style fontSize,
and if using StyleableStageText,
see spark.components.supportClasses.StyleableStageText Style fontSize.

The default value for the Spark theme is 12.
The default value for the Mobile theme is 24.

For the Spark theme, see
flashx.textLayout.formats.ITextLayoutFormat.fontStyle

For the Mobile theme, if using StyleableTextField,
see spark.components.supportClasses.StyleableTextField Style fontStyle,
and if using StyleableStageText,
see spark.components.supportClasses.StyleableStageText Style fontStyle.

For the Spark theme, see
flashx.textLayout.formats.ITextLayoutFormat.fontWeight

For the Mobile theme, if using StyleableTextField,
see spark.components.supportClasses.StyleableTextField Style fontWeight,
and if using StyleableStageText,
see spark.components.supportClasses.StyleableStageText Style fontWeight.

A proxy for the liveDragging style of the scrollbars
used by the Scroller component.

If this style is set to true, then the
liveDragging styles are set to true (the default).
That means dragging a scrollbar thumb immediately updates the viewport's scroll position.
If this style is set to false, then the liveDragging styles
are set to false.
That means when a scrollbar thumb is dragged the viewport's scroll position is only updated
then the mouse button is released.

Setting this style to false can be helpful
when updating the viewport's display is so
expensive that "liveDragging" performs poorly.

By default this style is undefined, which means that
the liveDragging styles are not modified.

The locale of the text.
Controls case transformations and shaping.
Uses standard locale identifiers as described in Unicode Technical Standard #35.
For example "en", "en_US" and "en-US" are all English, "ja" is Japanese.

The default value is undefined. This property inherits its value from an ancestor; if
still undefined, it inherits from the global locale style.
During the application initialization, if the global locale style is undefined,
then the default value is set to "en".

When using the Spark formatters and globalization classes, you can set this style on the
root application to the value of the LocaleID.DEFAULT constant.
Those classes will then use the client operating system's international preferences.

For the Spark theme, see
flashx.textLayout.formats.ITextLayoutFormat.textAlign

For the Mobile theme, if using StyleableTextField,
see spark.components.supportClasses.StyleableTextField Style textAlign,
and if using StyleableStageText,
see spark.components.supportClasses.StyleableStageText Style textAlign.

When in touch interaction mode, the number of milliseconds to wait after the user
interaction has occured before showing the component in a visually down state.

The reason for this delay is because when a user initiates a scroll gesture, we don't want
components to flicker as they touch the screen. By having a reasonable delay, we make
sure that the user still gets feedback when they press down on a component, but that the
feedback doesn't come too quickly that it gets displayed during a scroll gesture
operation.

If the mobile theme is applied, the default value for this style is 100 ms for
components inside of a Scroller and 0 ms for components outside of a Scroller.

For a List, changing contentBackgroundColor will
change the content background color of the List; however, if the item renderer
is opaque, the user may not see any difference. The item renderer's color is
affected by alternatingItemColors. In the Spark theme, by default, item
renderers are transparent (alternatingItemColors = undefined); however,
in the Mobile theme, item renderers are opaque by default
(alternatingItemColors = 0xFFFFFF).

The default value for the Spark theme is 0xFFFFFF.
The default value for the Mobile theme is 0xF0F0F0.

For a List, changing contentBackgroundColor will
change the content background color of the List; however, if the item renderer
is opaque, the user may not see any difference. The item renderer's color is
affected by alternatingItemColors. In the Spark theme, by default, item
renderers are transparent (alternatingItemColors = undefined); however,
in the Mobile theme, item renderers are opaque by default
(alternatingItemColors = 0xFFFFFF).

The default value for the Spark theme is 0xFFFFFF.
The default value for the Mobile theme is 0xF0F0F0.

A skin part that defines the horizontal scroll bar component.
The horizontalScrollBar skin part takes precedence over this
skin part.
When Scroller creates an instance of this part, it will set the
horizontalScrollBar skin part to that instance.
This property should be considered read-only. It is only
set by the Scroller's skin.
To access the HScrollBar instance, use horizontalScrollBar.

A skin part that defines the vertical scroll bar.
The verticalScrollBar skin part takes precedence over this
skin part.
When Scroller creates an instance of this part, it will set the
verticalScrollBar skin part to that instance.
This property should be considered read-only. It is only
set by the Scroller's skin.
To access the VScrollBar instance, use verticalScrollBar.

measuredSizeIncludesScrollBars

If true, the Scroller's measured size includes the space required for
the visible scroll bars, otherwise the Scroller's measured size depends
only on its viewport.

Components like TextArea, which "reflow" their contents to fit the
available width or height may use this property to stabilize their
measured size. By default a TextArea's is defined by its widthInChars
and heightInChars properties and in many applications it's preferable
for the measured size to remain constant, event when scroll bars are displayed
by the TextArea skin's Scroller.

In components where the content does not reflow, like a typical List's
items, the default behavior is preferable because it makes it less
likely that the component's content will be obscured by a scroll bar.

The default value is true.

Implementation public function get measuredSizeIncludesScrollBars():Boolean public function set measuredSizeIncludesScrollBars(value:Boolean):void

minViewportInset

The minimum space between the viewport and the edges of the Scroller.
If neither of the scroll bars is visible, then the viewport is inset by
minViewportInset on all four sides.
If a scroll bar is visible then the viewport is inset by minViewportInset
or by the scroll bar's size, whichever is larger.
ScrollBars are laid out flush with the edges of the Scroller.

The default value is 0.

Implementation public function get minViewportInset():Number public function set minViewportInset(value:Number):void

pageScrollingEnabled

By default, for mobile applications, scrolling is pixel based.
The final scroll location is any pixel location based on
the drag and throw gesture.
Set pageScrollingEnabled to true to
enable page scrolling.

Note: This property is only valid when the interactionMode style
is set to touch, indicating a mobile application.

The size of the page is determined by the size of the viewport
of the scrollable component.
You can only scroll a single page at a time, regardless of the scroll gesture.

You must scroll at least 50% of the visible area of the component
to cause the page to change.
If you scroll less than 50%, the component remains on the current page.
Alternatively, if the velocity of the scroll is high enough, the next page display.
If the velocity is not high enough, the component remains on the current page.

The default value is false.

Implementation public function get pageScrollingEnabled():Boolean public function set pageScrollingEnabled(value:Boolean):void

scrollSnappingMode

By default, for mobile applications, scrolling is pixel based.
The final scroll location is any pixel location based on
the drag and throw gesture.
Set scrollSnappingMode to other than none to
enable scroll snapping.
With scroll snapping enabled,
the content snaps to a final position based on the value of scrollSnappingMode.

Note: This property is only valid when the interactionMode style
is set to touch, indicating a mobile application.

For example, you scroll a List vertically with scrollSnappingMode
set to a value of leadingEdge.
The List control snaps to a final scroll position where the top list element
is aligned to the top of the list.

Changing this property to anything other than none can
result in an immediate change in scroll position to ensure
an element is correctly snapped into position.
This change in scroll position is not animated

in MXML, the possible values are "leadingEdge", "center",
"trailingEdge", and "none".
ActionScript values are defined by spark.components.ScrollSnappingMode.

The default value is "none".

Implementation public function get scrollSnappingMode():String public function set scrollSnappingMode(value:String):void

viewport

The viewport is added to the Scroller component's skin,
which lays out both the viewport and scroll bars.
When the viewport property is set, the viewport's
clipAndEnableScrolling property is
set to true to enable scrolling.
The Scroller does not support rotating the viewport directly. The viewport's
contents can be transformed arbitrarily, but the viewport itself cannot.

This property is Bindable.

The default value is null.

This property can be used as the source for data binding. When this property is modified, it dispatches the propertyChange event.

Dispatched when the scroll position is going to change due to a
mouseWheel event.

If there is a visible verticalScrollBar, then by default
the viewport is scrolled vertically by event.delta "steps".
The height of the step is determined by the viewport's
getVerticalScrollPositionDelta method using
either UP or DOWN, depending on the scroll
direction.

Otherwise, if there is a visible horizontalScrollBar, then by default
the viewport is scrolled horizontally by event.delta "steps".
The width of the step is determined by the viewport's
getHorizontalScrollPositionDelta method using
either LEFT or RIGHT, depending on the scroll
direction.

Calling the preventDefault() method
on the event prevents the scroll position from changing.
Otherwise if you modify the delta property of the event,
that value will be used as the number of "steps".

The FlexMouseEvent.MOUSE_WHEEL_CHANGING constant defines the value of the
type property of the event object for a mouseWheelChanging
event.

The properties of the event object have the following values:

Property

Value

altKey

Indicates whether the Alt key is down
(true) or not (false).

bubbles

false

buttonDown

Indicates whether the main mouse button is down
(true) or not (false).

cancelable

false

ctrlKey

Indicates whether the Control key is down
(true) or not (false).

currentTarget

The Object that defines the
event listener that handles the event. For example, if you use
myButton.addEventListener() to register an event listener,
myButton is the value of the currentTarget.

delta

Indicates how many lines should be scrolled for each notch the user
scrolls the mouse wheel.

localX

The horizontal position at which the event occurred.

localY

The vertical position at which the event occurred.

relatedObject

A reference to a display list object that is related to the event.
For this event, the object is the component which is
the target of the mouseWheel event.

shiftKey

Indicates whether the Shift key is down
(true) or not (false).

target

The Object that dispatched the event;
it is not always the Object listening for the event.
Use the currentTarget property to always access the
Object listening for the event.