Yahoo! UI Library

scrollview-base  3.3.0pr1

Yahoo! UI Library > scrollview-base > ScrollView
Search:
 
Filters

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

_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

_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, 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, _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

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

Classes

Configuration Attributes

Copyright © 2010 Yahoo! Inc. All rights reserved.