<s:Group width="300" height="200" clipAndEnableScrolling="true">
    <s:Rect x="0" y="0" width="500" height="400">
        <s:fill>
            <mx:LinearGradient rotation="45">
                <mx:entries>
                    <mx:GradientEntry color="red" />
                    <mx:GradientEntry color="yellow" />
                </mx:entries>
            </mx:LinearGradient>
        </s:fill>
        <s:stroke>
            <mx:SolidColorStroke color="black"/>
        </s:stroke>                
    </s:Rect>
</s:Group>

<s:Rect left="0" right="0" top="0" bottom="0" id="border">
    <s:stroke>
    <s:SolidColorStroke id="borderStroke" weight="1"/>
    </s:stroke>
</s:Rect>

<s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" minViewportInset="1" focusEnabled="false">
    <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
    <s:layout>
        <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="5" />
    </s:layout>
    </s:DataGroup>
</s:Scroller>

<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"/>

<s:Scroller width="100%" height="100%" minWidth="0" minHeight="0">
    <s:Group id="contentGroup"/>

/**
 *  Indicates under what conditions the horizontal scroll bar is displayed.
 *  
 *  ScrollPolicy.ON ("on") - the scroll bar is always displayed.
 * 
 *  ScrollPolicy.AUTO ("auto") - the scroll bar is displayed when the 
 *      viewport's contentWidth is larger than its width.
 * 
 *  ScrollPolicy.OFF ("off") - the scroll bar is never displayed. 
 *      The viewport can still be scrolled programmatically, by setting its 
 *      horizontalScrollPosition property.
 *  
 *  The scroll policy affects the measured size of the Scroller component.
 *  
 *  The default value is ScrollPolicy.AUTO.
 */
<a href="Style%28name%3D%26quot%3BhorizontalScrollPolicy%26quot%3B%2C%20type%3D%26quot%3BString%26quot%3B%2C%20inherit%3D%26quot%3Bno%26quot%3B%2C%20enumeration%3D%26quot%3Boff%2Con%2Cauto%26quot%3B%29">Style(name="horizontalScrollPolicy", type="String", inherit="no", enumeration="off,on,auto")</a>

/**
 *  Indicates under what conditions the vertical scroll bar is displayed.
 *  
 *  ScrollPolicy.ON ("on") - the scroll bar is always displayed.
 *  
 *  ScrollPolicy.AUTO ("auto") - the scroll bar is displayed when the 
 *      viewport's contentHeight is larger than its height.
 *  
 *  ScrollPolicy.OFF ("off") - the scroll bar is never displayed. 
 *      The viewport can still be scrolled programmatically, by setting its
 *      verticalScrollPosition property.
 *  
 *  The scroll policy affects the measured size of the Scroller component.
 */
<a href="Style%28name%3D%26quot%3BverticalScrollPolicy%26quot%3B%2C%20type%3D%26quot%3BString%26quot%3B%2C%20inherit%3D%26quot%3Bno%26quot%3B%2C%20enumeration%3D%26quot%3Boff%2Con%2Cauto%26quot%3B%29">Style(name="verticalScrollPolicy", type="String", inherit="no", enumeration="off,on,auto")</a>

/**
 *  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:
 *  
 *    <s:Scroller width="100" height="100">
 *         <s:Group> 
 *            <mx:Image width="300" height="400" 
 *                 source="@Embed(source='assets/logo.jpg')"/> 
 *         </s:Group>        
 *    </s:Scroller>
 *  
 *  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 Border 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 Border container, wrap the child in a Scroller component.
 *  
 *  To make the entire Border container 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 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:
 *  
 *    <s:Scroller width="100" height="100">
 *        <s:Group
 *            horizontalScrollPosition="50" verticalScrollPosition="50"> 
 *            <mx:Image width="300" height="400" 
 *                source="@Embed(source='assets/logo.jpg')"/> 
 *        </s:Group>                 
 *    </s:Scroller>
 *  
 *  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.
 */
public class Scroller extends SkinnableComponent 
       implements IFocusManagerComponent, IVisualElementContainer
{

    <a href="SkinPart">SkinPart</a> public var horizontalScrollBar:HScrollBar;
    <a href="SkinPart">SkinPart</a> public var verticalScrollBar:VScrollBar;

    /**
     *  The viewport component to be scrolled.
     * 
     *  The viewport is added to the Scroller component's skin, 
     *  which lays out both the viewport and scroll bars.
     * 
     *  When the <code>viewport</code> property is set, the viewport's 
     *  <code>clipAndEnableScrolling</code> 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.
     * 
     *  @default null
     */
    <a href="Bindable%28event%3D%26quot%3BviewportChanged%26quot%3B%29">Bindable(event="viewportChanged")</a>
    public function get viewport():IViewport
    public function set viewport(value:IViewport):void

    /**
     *  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 
     *  <code>minViewportInset</code> on all four sides.
     * 
     *  If a scroll bar is visible then the viewport is inset by <code>minViewportInset</code>
     *  or by the scroll bar's size, whichever is larger.
     * 
     *  ScrollBars are laid out flush with the edges of the Scroller.   
     * 
     *  @default 0 
     */
    public function get minViewportInset():Number
    public function set minViewportInset(value:Number):void

    /**
     *  If <code>true</code>, 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.
     * 
     *  <p>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 <code>widthInChars</code>
     *  and <code>heightInChars</code> 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.</p>
     * 
     *  <p>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 not obscured by a scroll bar.</p>
     * 
     *  @default true
     */
    public function get measuredSizeIncludesScrollBars():Boolean
    public function set measuredSizeIncludesScrollBars(value:Boolean):void
}

    /**
     *  The viewport controlled by this scrollbar.  If a viewport is
     *  specified, then changes to its actual size, content size, and
     *  scroll position, cause the corresponding ScrollBar methods to run:
     * 
     *  - viewportResizeHandler()
     *  - contentWidthChangeHandler()
     *  - contentHeightChangeHandler()
     *  - viewportVerticalScrollPositionChangeHandler()
     *  - viewportHorizontalScrollPositionChangeHandler()
     * 
     *  The VScrollBar and HScrollBar classes override these methods to 
     *  keep their pageSize, maximum, and value properties in sync with the
     *  viewport.   Similarly, they override their page and step methods to
     *  use the viewport's scrollPositionDelta methods to compute page and
     *  and step offsets.
     *    
     *  @default null
     */
    public function get viewport():IViewport
    public function set viewport(value:IViewport):void

   /**
    *  Called when the viewport's width or height changes, does nothing by default.
    */
    protected function viewportResizeHandler(event:ResizeEvent):void

   /**
    *  Called when the viewport's contentWidth changes, does nothing by default.
    */
    protected function viewportContentWidthChangeHandler(event:PropertyChangeEvent):void

    /**
     *  Called when the viewport's contentHeight changes, does nothing by default.
     */
    protected function viewportContentHeightChangeHandler(event:PropertyChangeEvent):void

    /**
     *  Called when the viewport's horizontalScrollPosition changes, does nothing by default.
     */
    protected function viewportHorizontalScrollPositionChangeHandler(event:PropertyChangeEvent):void

    /**
     *  Called when the viewport's verticalScrollPosition changes, does nothing by default. 
     */
    protected function viewportVerticalScrollPositionChangeHandler(event:PropertyChangeEvent):void