Package	spark.components
Class	public class InlineScroller
Inheritance	InlineScroller Scroller SkinnableComponent UIComponent FlexSprite flash.display.Sprite

This class is experimental, which means it has not been tested or documented as thoroughly as other core Apache Flex classes.

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

	  <st:InlineScroller width="100" height="100">
	       <s:Group> 
	          <mx:Image width="300" height="400" 
	               source="@Embed(source='assets/logo.jpg')"/> 
	       </s:Group>        
	  </st:InlineScroller>

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 InlineScroller 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 InlineScroller component. However, all Spark containers can have a InlineScroller component as a child component. For example, to use scroll bars on a child of the Spark Border container, wrap the child in a InlineScroller component.

To make the entire Border container scrollable, wrap it in a Group container. Then, make the Group container the child of the InlineScroller 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 InlineScroller 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:

	  <st:InlineScroller width="100" height="100">
	      <s:Group
	          horizontalScrollPosition="50" verticalScrollPosition="50"> 
	          <mx:Image width="300" height="400" 
	              source="@Embed(source='assets/logo.jpg')"/> 
	      </s:Group>                 
	  </st:InlineScroller>

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

The InlineScroller control has the following default characteristics:

Show MXML Syntax

Hide MXML Syntax

	  <st:InlineScroller
	   Properties
	    measuredSizeIncludesScrollBars="true"
	    minViewportInset="0"
	    viewport="null"
	  
	    Styles
	    alignmentBaseline="use_dominant_baseline"
	    alternatingItemColors=""
	    baselineShift="0.0"
	    blockProgression="TB"
	    breakOpportunity="auto"
	    cffHinting="horizontal_stem"
	    color="0"
	    contentBackgroundAlpha=""
	    contentBackgroundColor=""
	    digitCase="default"
	    digitWidth="default"
	    direction="LTR"
	    dominantBaseline="auto"
	    firstBaselineOffset="auto"
	    focusColor=""
	    focusedTextSelectionColor=""
	    fontFamily="Times New Roman"
	    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"
	    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"
	  />
	  

Default MXML Propertyviewport

See also