Class Detail

var properties = {
  target: "targetElementId",
  direction: "y"
};

scroller = new wink.ui.layout.Scroller(properties);

Parameters:

{object} properties

The properties object

{string} properties.target

{string} properties.direction

The direction of the scrollable area - possible values are "x", "y", or "xy"

{integer} properties.friction Optional, Default: 14

Value that determines the friction forces and influences the deceleration of the movement (value between 1 and 100)

{boolean} properties.captureFlow Optional, Default: true

indicates whether the capture event flow is used

{object} properties.callbacks Optional

This identifies the callback functions invoked at different stages of the scroll. Callbacks names are : scrollerTouched, startScrolling, scrolling, endScrolling, startSliding, stopSliding

{object} properties.scrollbars Optional

The scrollbar options

{boolean} properties.scrollbars.active Optional, Default: true

Indicates whether the scrollbars are activated (false is recommended when the performance of the device are low)

{integer} properties.scrollbars.width Optional, Default: 5

Width of the scrollbar

{string} properties.scrollbars.backgroundColor Optional, Default: "rgba(0, 0, 0, 0.55)"

The background color of the scrollbar

{string} properties.scrollbars.borderColor Optional, Default: "rgba(0, 0, 0, 0.2)"

The border color of the scrollbar

{boolean} properties.scrollbars.opacityTransition Optional, Default: true

Indicates whether an opacity transition must be set

{integer} properties.shiftOriginY Optional

Apply a shift on y direction since the origin of the scrollable area (top)

{integer} properties.shiftLimitY Optional

Apply a shift on y direction at the limit of the scrollable area (bottom)

Requires:

wink.ux.MovementTracker

wink.ux.Inertia

See:

Test page

Test page (horizontal)

Test page (both directions)

Test page (classical layout)

Test page (nested)

Test page (tablet layout)

Field Detail

Method Detail

• autoRefresh(options)
  Allows to let the component handle changes of the content, which impacts the size of the scrollable area

  Parameters:

  {object} options

  Options

  {boolean} options.active Optional, Default: false

  True to activate the auto-management, false otherwise

  {integer} options.checkDelay Optional, Default: 1000

  The number of milliseconds before rechecking the size of the content, 0 to indicate that no further verification is necessary
• backToBounds()
  Force explicitly the scroller to go back to bounds if necessary
• changeContext(properties)
  Changes the context of the component ; a single Scroller can thus be used for multiple content (eg in order to optimize performance)

  Parameters:

  {object} properties

  The same object as to initialize the component
• destroy()
  Destroys the component
• disable()
  Allows to disable scrolling. This can be useful if another component must take control, or if you want to reactivate the default behavior when the touch occurs on certain elements (after the scrollerTouched callback).
• enable()
  Allows to enable scrolling (enabled by default)
• {object} getPosition()
  Returns the scroll position

  Returns:

  {object} the scroll position as { x, y }
• {object} getViewProperties()
  Returns the view properties

  Returns:

  {object} the view properties
• scrollTo(x, y, duration)
  Scroll explicitly to the given position

  Parameters:

  {number} x

  x targeted coordinates

  {number} y

  y targeted coordinates

  {integer} duration Optional, Default: 0

  The duration of the scroll
• updateShiftBounds(originY, limitY)
  Updates the shift at bounds of the scrollable area

  Parameters:

  {integer} originY

  The new shift origin

  {integer} limitY

  The new shift limit
• updateTargetSize(sizeX, sizeY, recheck)
  Updates target sizes; To Call when target size change. Without parameters, it takes the offsets of the target DOM Node

  Parameters:

  {integer} sizeX Optional, Default: target.offsetWidth

  Target size on x

  {integer} sizeY Optional, Default: target.offsetHeight

  Target size on y

  {boolean} recheck Optional, Default: false

  Indicates whether there should be an audit delayed to ensure that the size of the content has not changed (useful in cases where the content is not completely loaded)
• updateViewportSize(viewportSizeX, viewportSizeY)
  Updates viewport sizes ; To call when the viewport change. Without parameters, it takes the client sizes of the target parent

  Parameters:

  {integer} viewportSizeX Optional, Default: target.parentNode.clientWidth

  Size of the viewport on x

  {integer} viewportSizeY Optional, Default: target.parentNode.clientHeight

  Size of the viewport on y