krpano 1.21.2 (build 2023-12-11)
 

ScrollArea layer type=scrollarea

  • A scroll-able area - automatically scroll children layers within a parent layer.
  • The scrollarea plugin needs to have a defined size and aligment and can be used only as children layer inside an other layer element. Within its parent element, it is possible to scroll the scrollarea plugin by dragging its children layers or by using the mouse-wheel.
  • The size of the scrollarea layer either needs to be set manually or let be automatically chosen by enabling the flowchildren setting.

Topics

Syntax

<layer name="box" type="container" ...>
  <layer name="scrollarea"
         type="scrollarea"
         align="..." width="..." height="..." flowchildren="..."
         ...
         scrolltype="inertia"
         direction="all"
         draggable="true"
         mwheel="true"
         capturechildren="true"
         parentmaskchildren="true"
         autoscrollbars=""
         onhover_autoscrolling="false"
         overscroll="1.0"
         momentum="0.06"
         friction="0.95"
         acceleration="0.08"
         returnacceleration="0.15"
         stepsize="10.0"
         onscroll=""
         onoverflowchange=""
  >
      Scrolling content layers here:
      <layer name="somecontent" ... />
      <layer name="morecontent" ... />
      ...
  </layer>
  
  Non scrolling layers (scrollbars, buttons, ...) here:
  <layer name="autoscrollbar" ... />
  <layer name="somebutton" ... />
  ...
</layer>

Plugin Attributes

Attribute nameTypeDefault value
scrolltypeString"inertia"
  • Set the type/behavior of the scrolling movement/animation.
  • Possible settings:
    • inertia (default) = smooth inertia scrolling with 'overscrolling'
    • smooth = smooth scrolling (but no overscrolling)
    • step = step (no animation, no overscrolling)
  • For fine-tuning the scrolling movement/animation adjust these settings.
Attribute nameTypeDefault value
directionString"all"
  • Set the allowed scrolling directions.
  • Possible settings:
    • all (default) = allow scrolling in all directions
    • h = only horizontal scrolling
    • v = only vertical scrolling.
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
capturechildrenBooleantrue
  • Capture also clicks on the children layer elements for dragging the layer.
Attribute nameTypeDefault value
parentmaskchildrenBooleantrue
  • The maskchildren setting that will get applied to the parent layer.
Attribute nameTypeDefault value
autoscrollbarsString
  • Automatic scrollbars.
  • Use given <layer> elements as scrollbars and automatically control their size and position depending on the current scrolling state.
  • Syntax: autoscrollbars="hscrollbar|vscrollbar|padding"
    • hscrollbar - name of the layer that should be used as horizontal scrollbar.
    • vscrollbar - name of the layer that should be used as vertical scrollbar.
    • padding - an optional padding around the scrollbar, 0 by default.
    When a scrollbar is not required, its name can be null.
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
momentum
acceleration
returnacceleration
friction
stepsize
Number
Number
Number
Number
Number
Number		1.00
0.06
0.08
0.15
0.95
10.0
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.
  • momentum - The momentum acceleration when dragging the scrollarea and releasing the mouse button / touch-finger.
  • acceleration - The movement acceleration when using the mouse-wheel or when calling the scrolltocenter()/scrollby() actions.
  • returnacceleration - The returning from overscrolled acceleration.
  • friction - The movement friction.
  • stepsize - The scroll-step in pixels (only for scrolltype="step").

Plugin Variables

Variable 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.
Attribute nameTypeDefault value
isscrollareaBooleantrue
  • A variable for checking if the layer is a scrollarea.

Plugin Events

Attribute nameTypeDefault value
onscrollString
  • This event will be called when the scroll-area has been scrolled.
Attribute nameTypeDefault value
onoverflowchangeString
  • This event will be called when size of the parent-layer or the size of the scrollarea has been changed, so that it will affect the content-overflowing.
  • This could be used to dynamically add or remove scrollbars depending on content changes.

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.