{ "type": "class",
  "qname": "spark.components.Scroller",
  "baseClassname": "spark.components.supportClasses.SkinnableComponent"
  ,
    "description": "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.  <p>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:</p>  <pre>\\n &lt;s:Scroller width=&quot;100&quot; height=&quot;100&quot;&gt;\\n &lt;s:Group&gt;\\n &lt;mx:Image width=&quot;300&quot; height=&quot;400&quot;\\n source=&quot;&#64;Embed(source='assets/logo.jpg')&quot;/&gt;\\n &lt;/s:Group&gt;\\n &lt;/s:Scroller&gt;</pre>  <p>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.</p>  <p>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. </p>  <p>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. </p>  <p>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 <code>horizontalScrollPosition</code> and <code>verticalScrollPosition</code> properties. scroll bars make it possible to view the area defined by the viewport's <code>contentWidth</code> and <code>contentHeight</code> properties.</p>  <p>You can directly set properties on the component wrapped by the Scroller by using the <code>Scroller.viewport</code> property. For example, you can modify the viewport's <code>horizontalScrollPosition</code> and <code>verticalScrollPosition</code> properties.</p>  <p>To directly access the scroll bar instances, either HScrollBar or VScrollBar, created by the Scroller, use the <code>Scroller.horizontalScrollBar</code> and <code>Scroller.verticalScrollBar</code> properties.</p>  <p>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: </p>  <pre>\\n &lt;s:Scroller width=&quot;100&quot; height=&quot;100&quot;&gt;\\n &lt;s:Group\\n horizontalScrollPosition=&quot;50&quot; verticalScrollPosition=&quot;50&quot;&gt;\\n &lt;mx:Image width=&quot;300&quot; height=&quot;400&quot;\\n source=&quot;&#64;Embed(source='assets/logo.jpg')&quot;/&gt;\\n &lt;/s:Group&gt;\\n &lt;/s:Scroller&gt;</pre>  <p>The scroll bars are displayed according to the vertical and horizontal scroll bar policy, which can be <code>auto</code>, <code>on</code>, or <code>off</code>. The <code>auto</code> 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.</p>  <p>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 <code>Group</code> and use the scroll bar <code>viewport</code> property to link them together.</p>  <p>The Scroller control has the following default characteristics:</p> <table class=&quot;innertable&quot;> <tr> <th>Characteristic</th> <th>Description</th> </tr> <tr> <td>Default size</td> <td>0</td> </tr> <tr> <td>Minimum size</td> <td>0</td> </tr> <tr> <td>Maximum size</td> <td>10000 pixels wide and 10000 pixels high</td> </tr> <tr> <td>Default skin class</td> <td>spark.skins.spark.ScrollerSkin</td> </tr> </table>   <p>The <code>&lt;s:Scroller&gt;</code> tag inherits all of the tag attributes of its superclass and adds the following tag attributes:</p>  <pre>\\n &lt;s:Scroller\\n <strong>Properties</strong>\\n measuredSizeIncludesScrollBars=&quot;true&quot;\\n minViewportInset=&quot;0&quot;\\n pageScrollingEnabled=&quot;false&quot;\\n scrollSnappingMode=&quot;none&quot;\\n viewport=&quot;null&quot;\\n \\n <strong>Styles</strong>\\n alignmentBaseline=&quot;use_dominant_baseline&quot;\\n alternatingItemColors=&quot;&quot;\\n baselineShift=&quot;0.0&quot;\\n blockProgression=&quot;TB&quot;\\n breakOpportunity=&quot;auto&quot;\\n cffHinting=&quot;horizontal_stem&quot;\\n clearFloats=&quot;none&quot;\\n color=&quot;0&quot;\\n contentBackgroundAlpha=&quot;&quot;\\n contentBackgroundColor=&quot;&quot;\\n digitCase=&quot;default&quot;\\n digitWidth=&quot;default&quot;\\n direction=&quot;LTR&quot;\\n dominantBaseline=&quot;auto&quot;\\n downColor=&quot;&quot;\\n firstBaselineOffset=&quot;auto&quot;\\n focusColor=&quot;&quot;\\n focusedTextSelectionColor=&quot;&quot;\\n fontFamily=&quot;Arial&quot;\\n fontLookup=&quot;device&quot;\\n fontSize=&quot;12&quot;\\n fontStyle=&quot;normal&quot;\\n fontWeight=&quot;normal&quot;\\n horizontalScrollPolicy=&quot;auto&quot;\\n inactiveTextSelection=&quot;&quot;\\n justificationRule=&quot;auto&quot;\\n justificationStyle=&quot;auto&quot;\\n kerning=&quot;auto&quot;\\n leadingModel=&quot;auto&quot;\\n ligatureLevel=&quot;common&quot;\\n lineHeight=&quot;120%&quot;\\n lineThrough=&quot;false&quot;\\n listAutoPadding=&quot;40&quot;\\n listStylePosition=&quot;outside&quot;\\n listStyleType=&quot;disc&quot;\\n locale=&quot;en&quot;\\n paragraphEndIndent=&quot;0&quot;\\n paragraphSpaceAfter=&quot;0&quot;\\n paragraphSpaceBefore=&quot;0&quot;\\n paragraphStartIndent=&quot;0&quot;\\n renderingMode=&quot;CFF&quot;\\n rollOverColor=&quot;&quot;\\n symbolColor=&quot;&quot;\\n tabStops=&quot;null&quot;\\n textAlign=&quot;start&quot;\\n textAlignLast=&quot;start&quot;\\n textAlpha=&quot;1&quot;\\n textDecoration=&quot;none&quot;\\n textIndent=&quot;0&quot;\\n textJustify=&quot;inter_word&quot;\\n textRotation=&quot;auto&quot;\\n trackingLeft=&quot;0&quot;\\n trackingRight=&quot;0&quot;\\n typographicCase=&quot;default&quot;\\n unfocusedTextSelectionColor=&quot;&quot;\\n verticalScrollPolicy=&quot;auto&quot;\\n whiteSpaceCollapse=&quot;collapse&quot;\\n wordSpacing=&quot;100%,50%,150%&quot;\\n /&gt;\\n </pre>",
  "tags": [
  {  "tagName": "includeExample",
         "values": ["examples/ScrollerExample.mxml"]},
      {  "tagName": "see",
         "values": ["spark.core.IViewport", "spark.components.DataGroup", "spark.components.Group", "spark.components.RichEditableText", "spark.skins.spark.ScrollerSkin"]},
      {  "tagName": "playerversion",
         "values": ["Flash 10", "AIR 1.5"]},
      {  "tagName": "mxml",
         "values": []},
      {  "tagName": "productversion",
         "values": ["Royale 0.9.4"]},
      {  "tagName": "langversion",
         "values": ["3.0"]}  ],
  "members": [
  { "type": "method",
        "qname": "spark.components.Scroller",
        "namespace": "",
        "bindable": [],
        "details": [],
        "deprecated": {},
          "description": "Constructor.",
        "tags": [
        {  "tagName": "playerversion",
               "values": ["Flash 10", "AIR 1.5"]},
            {  "tagName": "productversion",
               "values": ["Royale 0.9.4"]},
            {  "tagName": "langversion",
               "values": ["3.0"]}  ],
          "return": "",
          "params": []}
      ,
      { "type": "accessor",
        "access": "read-write",
        "return": "spark.core.IViewport",
        "qname": "viewport",
        "namespace": "public",
        "bindable": ["viewportChanged"],
        "details": [],
        "deprecated": {},
          "description": "The viewport component to be scrolled.  <p> 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. </p>  This property is Bindable.",
        "tags": [
        {  "tagName": "default",
               "values": ["null"]},
            {  "tagName": "playerversion",
               "values": ["Flash 10", "AIR 1.5"]},
            {  "tagName": "productversion",
               "values": ["Royale 0.9.4"]},
            {  "tagName": "langversion",
               "values": ["3.0"]}  ]},
      { "type": "accessor",
        "access": "read-write",
        "return": "Number",
        "qname": "minViewportInset",
        "namespace": "public",
        "bindable": [],
        "details": [],
        "deprecated": {},
          "description": "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.",
        "tags": [
        {  "tagName": "default",
               "values": ["0"]},
            {  "tagName": "playerversion",
               "values": ["Flash 10", "AIR 2.5"]},
            {  "tagName": "productversion",
               "values": ["Royale 0.9.4"]},
            {  "tagName": "langversion",
               "values": ["3.0"]}  ]},
      { "type": "accessor",
        "access": "read-write",
        "return": "Boolean",
        "qname": "measuredSizeIncludesScrollBars",
        "namespace": "public",
        "bindable": [],
        "details": [],
        "deprecated": {},
          "description": "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 &quot;reflow&quot; 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 be obscured by a scroll bar.</p>",
        "tags": [
        {  "tagName": "default",
               "values": ["true"]},
            {  "tagName": "playerversion",
               "values": ["Flash 10", "AIR 2.5"]},
            {  "tagName": "productversion",
               "values": ["Royale 0.9.4"]},
            {  "tagName": "langversion",
               "values": ["3.0"]}  ]},
      { "type": "method",
        "qname": "setActualSize",
        "namespace": "public",
        "bindable": [],
        "details": ["override"],
        "deprecated": {},
          "return": "void",
          "params": [{ "name": "w", "type": "Number"},
        { "name": "h", "type": "Number"}]}
      ]
  }