scrollview-base.js revision 825536c58c25de1d66117da0ed460b52ed8f1eab
c0464f9735ebc6b18978bc11f7a16beea7df84dfJenny Han Donnelly * The scrollview-base module provides a basic ScrollView Widget, without scrollbar indicators
c0464f9735ebc6b18978bc11f7a16beea7df84dfJenny Han Donnelly * @module scrollview-base
c0464f9735ebc6b18978bc11f7a16beea7df84dfJenny Han Donnellyvar getClassName = Y.ClassNameManager.getClassName,
CLASS_NAMES = {
MOUSEWHEEL_ENABLED = true,
* ScrollView provides a scrollable widget, supporting flick gestures, across both touch and mouse based devices.
function ScrollView() {
initializer: function() {
* Notification event fired at the end of a flick gesture (the flick animation may still be in progress)
var sv = this;
_uiSizeCB: function() {},
_onTransEnd: function(e) {
bindUI: function() {
var sv = this;
if (IE) {
_bindAttrs : function() {
var sv = this,
this.after({
if (!IE) {
* @param drag {boolean} If true, the method binds listener to enable drag (gesturemovestart). If false, the method unbinds gesturemove listeners for drag support.
if (drag) {
* @param flick {Object|boolean} If truthy, the method binds listeners for flick support. If false, the method unbinds flick listeners.
if (flick) {
* @param mousewheel {Object|boolean} If truthy, the method binds listeners for mousewheel support. If false, the method unbinds mousewheel listeners.
if (this._scrollsVertical) {
if (mousewheel) {
syncUI: function() {
this._uiDimensionsChange();
if ( y < this._minScrollY) {
y = this._minScrollY;
else if ( y > this._maxScrollY) {
y = this._maxScrollY;
if (!this._cDisabled) {
xSet = (x !== null),
ySet = (y !== null),
if (xSet) {
if (ySet) {
if (NATIVE_TRANSITIONS) {
transition = {
if (NATIVE_TRANSITIONS) {
if (!callback) {
if (NATIVE_TRANSITIONS) {
_transform : function(x, y) {
return (this._forceHWTransforms) ? 'translate('+ x +'px,'+ y +'px) translateZ(0px)' : 'translate('+ x +'px,'+ y +'px)';
if (NATIVE_TRANSITIONS) {
* Flag driving whether or not we should try and force H/W acceleration when transforming. Currently enabled by default for Webkit.
_prevent : {
start : false,
move : true,
end : false
_onGestureMoveStart: function(e) {
var sv = this,
e.preventDefault();
_onGestureMove: function(e) {
var sv = this;
e.preventDefault();
_onGestureMoveEnd: function(e) {
e.preventDefault();
* 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
* <p>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((horiz && absDistance > bb.get('offsetWidth')/2) || (vert && absDistance > bb.get('offsetHeight')/2)) {
* Internal state, defines whether or not the scrollview has been scrolled in the forward (distance > 0), or backward (distance < 0) direction
if (vert) {
if (horiz) {
this._snapToEdge = true;
if (vert) {
if (horiz) {
onGestureMoveEnd: true
_afterScrollChange : function(e) {
_afterFlickChange : function(e) {
_afterDisabledChange : function(e) {
_afterDragChange : function(e) {
_afterDimChange: function() {
this._uiDimensionsChange();
* @returns {Array} The offsetWidth, offsetHeight, scrollWidth and scrollHeight as an array: [offsetWidth, offsetHeight, scrollWidth, scrollHeight]
_getScrollDims: function() {
var dims,
if (NATIVE_TRANSITIONS) {
this._forceHWTransforms = false; // the z translation was causing issues with picking up accurate scrollWidths in Chrome/Mac.
dims = [bb.get("offsetWidth"), bb.get("offsetHeight"), bb.get('scrollWidth'), bb.get('scrollHeight')];
return dims;
_uiDimensionsChange: function() {
var sv = this,
_flick: function(e) {
sv = this;
_mousewheel: function(e) {
if (this.scrollbars) {
e.preventDefault();
_flickFrame: function() {
var sv = this,
newY,
maxY,
minY,
newX,
maxX,
minX,
if (scrollsVertical) {
if (scrollsHorizontal) {
if(scrollsVertical) {
if(scrollsHorizontal) {
if (scrollsVertical) {
if (scrollsHorizontal) {
var sv = this;
if(fireEvent) {
if (this._cDisabled) {
return val;
ATTRS: {
scrollY: {
scrollX: {
deceleration: {
bounce: {
flick: {
value: {
* Enable/Disable dragging the ScrollView content (note: flick support is enabled/disabled separately)
drag: {
value: true
_TRANSITION : {