javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Scroll fixes

Browse Source
This commit is contained in:
Max Lynch
2013-10-25 13:37:20 -05:00
parent 2219f50e86
commit ab38d805d2
9 changed files with 298 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
js/views/scrollView.js
View File

@ -131,7 +131,7 @@
}
*/
console.log('Momentum of time', time, speed, destination, duration);
console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration);
return {
destination: Math.round(destination),
duration: duration
@ -318,7 +318,6 @@
newY = 0;
}
console.log(newX, newY);
// Update the new translated Y point of the container
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
@ -326,6 +325,8 @@
_this.x = newX;
_this.y = newY;
console.log('Moving to', newX, newY);
// Check if we need to reset the drag initial states if we've
// been dragging for a bit
if(timestamp - drag.startTime > 300) {
@ -379,30 +380,41 @@
var parentHeight = _this.el.offsetHeight;
// Calculate how long we've been dragging for, with a max of 300ms
var duration = Math.min(300, (Date.now()) - _this._drag.startTime);
var duration = Date.now() - _this._drag.startTime;
var newX = Math.round(_this.x);
var newY = Math.round(_this.y);
this.scrollTo(newX, newY);
var distanceX = Math.abs(newX - _this.startX);
var distanceY = Math.abs(newY - _this.startY);
this.endTime = Date.now();
//distanceX = Math.abs(newX - this.startX),
//var distanceY = Math.abs(newY - drag.startY);
// If the duration is within reasonable bounds, enable momentum scrolling
if(duration < 300) {
var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth);
var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
//var newX = momentumX.destination;
newX = momentumX.destination;
newY = momentumY.destination;
var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth);
var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
//var newX = momentumX.destination;
newX = momentumX.destination;
newY = momentumY.destination;
var timeX = momentumX.duration;
var timeY = momentumY.duration;
var timeX = momentumX.duration;
var timeY = momentumY.duration;
}
// Check if we need to rubber band back
if(_this.x > 0) {
_this.scrollTo(0, 0, _this.bounceTime);
return;
} else if((-_this.x + parentWidth) > totalWidth) {
_this.scrollTo(0, totalWidth - parentWidth, _this.bounceTime);
_this.scrollTo(-(totalWidth - parentWidth), 0, _this.bounceTime);
return;
}
if(_this.y > 0) {

23
js/views/scrollerView.js
View File

@ -416,24 +416,32 @@ ionic.views.Scroll.prototype = {
},
_move: function (e) {
// Make sure scrolling is enabled
if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
return;
}
// Prevent default if necessary
if ( this.options.preventDefault ) { // increases performance on Android? TODO: check!
e.preventDefault();
}
// Grab the current touch point
var point = e.touches ? e.touches[0] : e,
// Check how far we've scrolled in the X direction
deltaX = this.hasHorizontalScroll ? point.pageX - this.pointX : 0,
// Check how far we've scrolled in the Y direction
deltaY = this.hasVerticalScroll ? point.pageY - this.pointY : 0,
// Get current timestmap
timestamp = utils.getTime(),
newX, newY,
absDistX, absDistY;
// Store the current finger points
this.pointX = point.pageX;
this.pointY = point.pageY;
// Calculate the total distance travelled
this.distX += deltaX;
this.distY += deltaY;
absDistX = Math.abs(this.distX);
@ -475,10 +483,12 @@ ionic.views.Scroll.prototype = {
deltaX = 0;
}
// The new scroll point is the current position plus the delta moved since
// last
newX = this.x + deltaX;
newY = this.y + deltaY;
// Slow down if outside of the boundaries
// Slow down if outside of the boundaries (rubber banding)
if ( newX > 0 || newX < this.maxScrollX ) {
newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
}
@ -486,13 +496,18 @@ ionic.views.Scroll.prototype = {
newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
}
// Calcualte the directional multiplier
this.directionX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
// We moved
this.moved = true;
// Translate to the new position
this._translate(newX, newY);
// Check if the difference between right now and when we started is bigger than 300ms.
// We then reset the start positions to reduce the possibility of large errors
if ( timestamp - this.startTime > 300 ) {
this.startTime = timestamp;
this.startX = this.x;
@ -502,20 +517,26 @@ ionic.views.Scroll.prototype = {
},
_end: function (e) {
// Check if scrolling is enabled
if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
return;
}
// Prevent default if enabled
if ( this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
e.preventDefault();
}
// Get the current point
var point = e.changedTouches ? e.changedTouches[0] : e,
momentumX,
momentumY,
// Calculate how long we've been dragging for time wise
duration = utils.getTime() - this.startTime,
// Store the new position rounded
newX = Math.round(this.x),
newY = Math.round(this.y),
// Calculate the total distance travelled
distanceX = Math.abs(newX - this.startX),
distanceY = Math.abs(newY - this.startY),
time = 0,