# Yahoo! UI Library

### scrollview-base 3.3.0

Yahoo! UI Library > scrollview-base > ScrollView
Search:
Filters Show Private Show Protected Show Deprecated

## Class ScrollView - extends Widget

ScrollView provides a scrollable widget, supporting flick gestures, across both touch and mouse based devices.

### Constructor

ScrollView `( config )`

Parameters:
  `config <Object>` Object literal with initial attribute values

### Properties

#### _currentVelocity - `protected number`

Internal state, currently calculated velocity from the flick

#### _flicking - `protected boolean`

Internal state, defines whether or not the scrollview is currently animating a flick

#### _isDragging - `protected boolean`

Internal state, defines whether or not the scrollview is currently being dragged

#### _maxScrollX - `protected number`

Internal state, defines the maximum amount that the scrollview can be scrolled along the X axis

#### _maxScrollY - `protected number`

Internal state, defines the maximum amount that the scrollview can be scrolled along the Y axis

#### _minScrollX - `protected number`

Internal state, defines the minimum amount that the scrollview can be scrolled along the X axis

#### _minScrollY - `protected number`

Internal state, defines the minimum amount that the scrollview can be scrolled along the Y axis

#### _prevent - `protected Object`

Used to control whether or not ScrollView's internal gesturemovestart, gesturemove and gesturemoveend event listeners should preventDefault. The value is an object, with "start", "move" and "end" properties used to specify which events should preventDefault and which shouldn't:

    {
    start : false,
    move : true,
    end : false
    }

The default values are set up in order to prevent panning, on touch devices, while allowing click listeners on elements inside the ScrollView to be notified as expected.

#### _scrolledForward - `protected boolean`

Internal state, defines whether or not the scrollview has been scrolled in the forward (distance > 0), or backward (distance < 0) direction

#### _scrolledHalfway - `protected boolean`

Internal state, defines whether or not the scrollview has been scrolled half it's width/height

#### _scrollHeight - `protected number`

Internal state, cached scrollHeight, for performance

#### _scrollsHorizontal - `protected boolean`

Internal state, defines whether or not the scrollview can scroll horizontally

#### _scrollsVertical - `protected boolean`

Internal state, defines whether or not the scrollview can scroll vertically

#### _scrollWidth - `protected number`

Internal state, cached scrollWidth, for performance

#### _snapToEdge - `protected boolean`

Internal state, defines whether or not the scrollview needs to snap to a boundary edge

#### lastScrolledAmt - `Number`

Contains the distance (postive or negative) in pixels by which the scrollview was last scrolled. This is useful when setting up click listeners on the scrollview content, which on mouse based devices are always fired, even after a drag/flick.

Touch based devices don't currently fire a click event, if the finger has been moved (beyond a threshold) so this check isn't required, if working in a purely touch based environment

#### ScrollView._TRANSITION.PROPERTY - `private object`

Style property name to use to set transition property. Currently, Webkit specific (WebkitTransitionProperty)

#### ScrollView.ATTRS - `protected static {Object}`

Static property used to define the default attribute configuration of the Widget.

#### ScrollView.BOUNCE_RANGE - `static Number`

The default bounce distance in pixels
Default Value: 150

#### ScrollView.CLASS_NAMES - `static Object`

List of class names used in the scrollview's DOM

#### ScrollView.EASING - `static String`

The default easing used when animating the flick
Default Value: 'cubic-bezier(0, 0.1, 0, 1.0)'

#### ScrollView.FRAME_STEP - `static Number`

The interval used when animating the flick
Default Value: 30

#### ScrollView.NAME - `protected static String`

The identity of the widget.
Default Value: 'scrollview'

#### ScrollView.SNAP_EASING - `static String`

The default easing to use when animatiing the bounce snap back.
Default Value: 'ease-out'

#### ScrollView.UI_SRC - `static String`

Flag used to source property changes initiated from the DOM
Default Value: "ui"

#### Properties inherited from Plugin.Host:

`PluginHost`

#### Properties inherited from Attribute:

``

#### Properties inherited from Widget:

`_UI_ATTRS, BOUNDING_TEMPLATE, CONTENT_TEMPLATE, DEF_PARENT_NODE, DEF_UNIT, UI_EVENTS`

#### Properties inherited from Base:

`name`

### Methods

#### _afterDimChange

`protected void _afterDimChange ( e )`
After listener for the height or width attribute

Parameters:
  `e <Event.Facade>` The event facade

#### _afterScrollChange

`protected void _afterScrollChange ( e )`
After listener for changes to the scrollX or scrollY attribute

Parameters:
  `e <Event.Facade>` The event facade

#### _fixIESelect

`private void _fixIESelect ( bb , cb )`
Internal method to fix text selection in IE

Parameters:
  `bb <Node>` The bounding box
  `cb <Node>` The content box

#### _flick

`protected void _flick ( distance , time )`
Execute a flick at the end of a scroll action

Parameters:
  `distance <Number>` The distance (in px) the user scrolled before the flick
  `time <Number>` The number of ms the scroll event lasted before the flick

#### _flickFrame

`protected void _flickFrame ( )`
Execute a single frame in the flick animation

#### _iePreventSelect

`private void _iePreventSelect ( )`
Native onselectstart handle to prevent selection in IE

#### _ieRestoreSelect

`private void _ieRestoreSelect ( )`
Restores native onselectstart handle, backed up to prevent selection in IE

#### _killTimer

`protected void _killTimer ( fireEvent )`
Stop the animation timer

Parameters:
  `fireEvent <Boolean>` If true, fire the scrollEnd event

#### _onGestureMove

`private void _onGestureMove ( e )`
gesturemove event handler

Parameters:
  `e <Event.Facade>` The gesturemove event facade

#### _onGestureMoveEnd

`private void _onGestureMoveEnd ( e )`
gestureend event handler

Parameters:
  `e <Event.Facade>` The gesturemoveend event facade

#### _onGestureMoveStart

`private void _onGestureMoveStart ( e )`
gesturemovestart event handler

Parameters:
  `e <Event.Facade>` The gesturemovestart event facade

#### _onTransEnd

`private void _onTransEnd ( e )`
Content box transition callback

Parameters:
  `e <Event.Facade>` The event facade

#### _setScroll

`private Number _setScroll ( val , dim )`
The scrollX, scrollY setter implementation

Parameters:
  `val <Number>`
  `dim <String>`

Returns: `Number`
  The constrained value, if it exceeds min/max range

#### _setScrollX

`protected Number _setScrollX ( val )`
Setter for the scrollX attribute

Parameters:
  `val <Number>` The new scrollX value

Returns: `Number`
  The normalized value

#### _setScrollY

`protected Number _setScrollY ( val )`
Setter for the scrollY ATTR

Parameters:
  `val <Number>` The new scrollY value

Returns: `Number`
  The normalized value

#### _uiDimensionsChange

`protected void _uiDimensionsChange ( )`
This method gets invoked whenever the height or width attributes change, allowing us to determine which scrolling axes need to be enabled.

#### _uiScrollTo

`protected void _uiScrollTo ( x , y , duration , easing )`
Used to move the ScrollView content

Parameters:
  `x <Number>`
  `y <Number>`
  `duration <Number>`
  `easing <String>`

#### _uiSizeCB

`protected void _uiSizeCB ( )`
Override the contentBox sizing method, since the contentBox height should not be that of the boundingBox.

#### bindUI

`void bindUI ( )`
bindUI implementation Hooks up events for the widget

#### initializer

`void initializer ( )`
Designated initializer

#### scrollTo

`void scrollTo ( x , y , duration , easing )`
Scroll the element to a given y coordinate

Parameters:
  `x <Number>` The x-position to scroll to
  `y <Number>` The y-position to scroll to
  `duration <Number>` Duration, in ms, of the scroll animation (default is 0)
  `easing <String>` An easing equation if duration is set

#### Methods inherited from EventTarget:

`_getType, _monitor, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, getTargets, on, once, parseType, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll`

#### Methods inherited from Attribute:

`_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttr, _getAttrCfg, _getAttrInitVal, _getAttrs, _getStateVal, _isLazyAttr, _normAttrVals, _protectAttrs, _set, _setAttr, _setAttrs, _setAttrVal, _setStateVal, addAttr, addAttrs, attrAdded, get, getAttrs, modifyAttr, removeAttr, reset, set, setAttrs`

#### Methods inherited from Widget:

`_applyParsedConfig, _applyParser, _bindAttrUI, _bindDOM, _bindUI, _createUIEvent, _defaultCB, _defRenderFn, _destroyUIEvents, _getHtmlParser, _getSrcNode, _getStrings, _getUIEventNode, _guid, _initUIEvent, _isUIEvent, _onDocFocus, _onDocMouseDown, _removeLoadingClassNames, _renderBox, _renderBoxClassNames, _renderUI, _setAttrUI, _setBB, _setBox, _setCB, _setStrings, _strSetter, _syncAttrUI, _syncUI, _uiSetDim, _uiSetDisabled, _uiSetFocused, _uiSetHeight, _uiSetTabIndex, _uiSetVisible, _uiSetWidth, _uiSizeCB, _unbindDOM, _unbindUI, _validTabIndex, bindUI, blur, destructor, disable, enable, focus, getClassName, getDefaultLocale, getSkinName, getString, getStrings, hide, initializer, render, renderer, renderUI, show, syncUI, toString`

#### Methods inherited from Base:

`_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, _preInitEventCfg, destroy, init, toString`

#### Methods inherited from Plugin.Host:

`_destroyPlugins, _initPlugins, hasPlugin, plug, unplug`

### Events

#### bounceChange

`bounceChange ( event )`
Fires when the value for the configuration attribute 'bounce' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### decelerationChange

`decelerationChange ( event )`
Fires when the value for the configuration attribute 'deceleration' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### flick

`flick ( e )`
Notification event fired at the end of a flick gesture (the flick animation may still be in progress)

Parameters:
  `e <EventFacade>` The default event facade.

#### flickChange

`flickChange ( event )`
Fires when the value for the configuration attribute 'flick' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### scrollEnd

`scrollEnd ( e )`
Notification event fired at the end of a scroll transition

Parameters:
  `e <EventFacade>` The default event facade.

#### scrollXChange

`scrollXChange ( event )`
Fires when the value for the configuration attribute 'scrollX' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### scrollYChange

`scrollYChange ( event )`
Fires when the value for the configuration attribute 'scrollY' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### Events inherited from Widget:

`boundingBoxChange, contentBoxChange, disabledChange, focusedChange, heightChange, idChange, localeChange, renderChange, renderedChange, srcNodeChange, stringsChange, tabIndexChange, visibleChange, widget:contentUpdate, widget:render, widthChange,`

#### Events inherited from Base:

`destroy, destroyedChange, init, initializedChange,`

### Configuration Attributes

#### bounce `- Number`

Drag coefficient for intertial scrolling at the upper and lower boundaries of the scrollview. Set to 0 to disable "rubber-banding".
Default Value: 0.1

#### deceleration `- object`

Drag coefficent for inertial scrolling. The closer to 1 this value is, the less friction during scrolling.
Default Value: 0.93

#### flick `- Object`

The minimum distance and/or velocity which define a flick
Default Value: Object with properties minDistance = 10, minVelocity = 0.3.

#### scrollX `- Number`

The scroll position in the x-axis
Default Value: 0

#### scrollY `- Number`

The scroll position in the y-axis
Default Value: 0

#### Configuration attributes inherited from Widget:

`boundingBox, contentBox, disabled, focused, height, id, locale render rendered srcNode strings tabIndex visible width`

#### Configuration attributes inherited from Base:

`destroyed initialized`

Copyright © 2011 Yahoo! Inc. All rights reserved.