Scroller  - AS3 Flex

패키지	spark.components
클래스	public class Scroller
상속	Scroller SkinnableComponent UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object
구현	IFocusManagerComponent, IVisualElementContainer
하위 클래스	AXMScroller

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 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:

  <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.

The Scroller control has the following default characteristics:

MXML 구문 표시

MXML 구문 숨기기

  <s:Scroller
   Properties
    measuredSizeIncludesScrollBars="true"
    minViewportInset="0"
    viewport="null"
  
    Styles
    alignmentBaseline="use_dominant_baseline"
    alternatingItemColors=""
    baselineShift="0.0"
    blockProgression="TB"
    breakOpportunity="auto"
    cffHinting="horizontal_stem"
    clearFloats="none"
    color="0"
    contentBackgroundAlpha=""
    contentBackgroundColor=""
    digitCase="default"
    digitWidth="default"
    direction="LTR"
    dominantBaseline="auto"
    downColor=""
    firstBaselineOffset="auto"
    focusColor=""
    focusedTextSelectionColor=""
    fontFamily="Arial"
    fontLookup="device"
    fontSize="12"
    fontStyle="normal"
    fontWeight="normal"
    horizontalScrollPolicy="auto"
    inactiveTextSelection=""
    justificationRule="auto"
    justificationStyle="auto"
    kerning="auto"
    leadingModel="auto"
    ligatureLevel="common"
    lineHeight="120%"
    lineThrough="false"
    listAutoPadding="40"
    listStylePosition="outside"
    listStyleType="disc"
    locale="en"
    paragraphEndIndent="0"
    paragraphSpaceAfter="0"
    paragraphSpaceBefore="0"
    paragraphStartIndent="0"
    renderingMode="CFF"
    rollOverColor=""
    symbolColor=""
    tabStops="null"
    textAlign="start"
    textAlignLast="start"
    textAlpha="1"
    textDecoration="none"
    textIndent="0"
    textJustify="inter_word"
    textRotation="auto"
    trackingLeft="0"
    trackingRight="0"
    typographicCase="default"
    unfocusedTextSelectionColor=""
    verticalScrollPolicy="auto"
    whiteSpaceCollapse="collapse"
    wordSpacing="100%,50%,150%"
  />
  

기본 MXML 속성viewport

예제 보기

기타 예제

관련 API 요소