News • Examples • Documentation • Download • Buy • Forum • Contact
NOTE: This page is from an older version, see the latest version here.

ScrollArea Plugin scrollarea.swf / scrollarea.js Version 1.20.7

  • A scroll-able area - automatically scroll children layer/plugin elements within a (maskchildren="true") parent layer element.
  • The scrollarea plugin needs to have a defined size and aligment and can be used only as children element inside an other layer element. Within this parent element, it is possible to scroll the scrollarea plugin by dragging the children elements or by using the mouse-wheel.

Topics

Syntax

<layer name="scrollarea"
       url.flash="scrollarea.swf"
       url.html5="scrollarea.js"
       parent="..."
       align="..." width="..." height="..."
       direction="all"
       draggable="true"
       capturechildren="true"
       parentmaskchildren="true"
       mwheel="true"
       onhover_autoscrolling="false"
       overscroll="1.0"
       friction="0.95"
       acceleration="0.08"
       returnacceleration="0.15"
       momentum="0.06"
       onscroll=""
       />

Plugin Attributes

Attribute nameTypeDefault value
directionString"all"
  • Set the allowed scrolling directions.
  • Possible settings:
    • all = allow scrolling in all directions
    • h = only horizontal scrolling
    • v = only vertical scrolling.
Attribute nameTypeDefault value
capturechildrenBooleantrue
  • Capture also clicks on the children layer elements for dragging the layer.
Attribute nameTypeDefault value
parentmaskchildrenBooleantrue
Attribute nameTypeDefault value
draggableBooleantrue
  • Should the scroll-area be draggable / allow dragging control.
Attribute nameTypeDefault value
mwheelBooleantrue
  • Mouse-Wheel support / scroll by using the Mouse-Wheel.
Attribute nameTypeDefault value
onhover_autoscrollingBooleanfalse
  • Automatic scrolling when the mouse hovers the area.
  • The scrolling will be proportionally relative to the mouse position.
  • This setting has no effect on touch usage.
Attribute nameTypeDefault value
overscroll
friction
acceleration
returnacceleration
momentum
Number
Number
Number
Number
Number		1.00
0.95
0.08
0.15
0.06
  • Settings for customizing / fine-tuning the movement behavior.
  • overscroll - The amount of overscrolling (0.0 = no overscroll, 1.0 = full overscroll).
    Lower values are also reducing the momentum.
  • friction - The movement friction.
  • acceleration - The movement acceleration.
  • returnacceleration - The returning (from overscrolled) acceleration.
  • momentum - The momentum acceleration.
Attribute nameTypeDefault value
loverflow (read only)
roverflow (read only)
toverflow (read only)
boverflow (read only)
woverflow (read only)
hoverflow (read only)
Number
Number
Number
Number
Number
Number
  • loverflow = left overflow
    roverflow = right overflow
    toverflow = top overflow
    boverflow = bottom overflow
  • woverflow = total width overflow
    hoverflow = total height overflow
  • The number of pixels that are currenlty outside the viewing area.
  • Positive values indicate outside and negative values inside.

Plugin Events

Attribute nameTypeDefault value
onscrollString
  • This event will be called when the scroll-area has been scrolled.

Plugin Actions

Action name
setcenter(x,y)
  • Center the plugin at the given children x/y position.
Action name
scrolltocenter(x,y)
  • Scroll the plugin to center itself at the given children x/y position.
Action name
scrollby(dx,dy)
  • Applies/adds the given delta x/y values to the scrolling velocity vector.
Action name
stopscrolling()
  • Stop all current scrollings.
Action name
update()
  • Tell the plugin that the size of the parent element has been changed.