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

Fixed vert scrolling issue.

Browse Source
This commit is contained in:
Max Lynch
2013-10-25 17:54:25 -05:00
parent bb97ff065c
commit 70946699a5
2 changed files with 68 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
dist/js/ionic.js vendored
View File

@ -2558,8 +2558,11 @@ window.ionic = {
scrollTo: function(x, y, time, easing) { scrollTo: function(x, y, time, easing) {
var _this = this; var _this = this;
easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)'; easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
var ox = x, oy = y;
var el = this.el; var el = this.el;
if(x !== null) { if(x !== null) {
@ -2602,7 +2605,6 @@ window.ionic = {
wrapScrollPosition: function(transitionTime) { wrapScrollPosition: function(transitionTime) {
var _this = this; var _this = this;
window.requestAnimationFrame(function() {
var totalWidth = _this.el.scrollWidth; var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.scrollHeight; var totalHeight = _this.el.scrollHeight;
var parentWidth = _this.el.parentNode.offsetWidth; var parentWidth = _this.el.parentNode.offsetWidth;
@ -2633,7 +2635,6 @@ window.ionic = {
_this.scrollTo(x, y, transitionTime || 0, _this.bounceEasing); _this.scrollTo(x, y, transitionTime || 0, _this.bounceEasing);
return true; return true;
});
}, },
_wheel: function(e) { _wheel: function(e) {
@ -2710,11 +2711,14 @@ window.ionic = {
destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin; destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
distance = Math.abs(destination - current); distance = Math.abs(destination - current);
duration = distance / speed; duration = distance / speed;
console.log("MOMENTUM TOO FAR DOWN", destination);
} else if ( destination > 0 ) { } else if ( destination > 0 ) {
// We have dragged too far up, snap back to 0 // We have dragged too far up, snap back to 0
destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0; destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
distance = Math.abs(current) + destination; distance = Math.abs(current) + destination;
duration = distance / speed; duration = distance / speed;
console.log("MOMENTUM TOO FAR UP", destination);
} }
console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration); console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration);
@ -2942,8 +2946,8 @@ window.ionic = {
// Calculate the viewport height and the height of the content // Calculate the viewport height and the height of the content
var totalWidth = _this.el.scrollWidth; var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.scrollHeight; var totalHeight = _this.el.scrollHeight;
var parentWidth = _this.el.offsetWidth; var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.offsetHeight; var parentHeight = _this.el.parentNode.offsetHeight;
// Calculate how long we've been dragging for, with a max of 300ms // Calculate how long we've been dragging for, with a max of 300ms
var duration = Date.now() - _this._drag.startTime; var duration = Date.now() - _this._drag.startTime;
@ -2976,6 +2980,7 @@ window.ionic = {
// If we've moved, we will need to scroll // If we've moved, we will need to scroll
if(newX != _this.x || newY != _this.y) { if(newX != _this.x || newY != _this.y) {
console.trace("SCROLL FROM", _this.x, _this.y, "TO", newX, newY);
// If the end position is out of bounds, change the function we use for easing // If the end position is out of bounds, change the function we use for easing
// to get a different animation for the rubber banding // to get a different animation for the rubber banding

13
js/views/scrollView.js
View File

@ -75,8 +75,11 @@
scrollTo: function(x, y, time, easing) { scrollTo: function(x, y, time, easing) {
var _this = this; var _this = this;
easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)'; easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
var ox = x, oy = y;
var el = this.el; var el = this.el;
if(x !== null) { if(x !== null) {
@ -119,7 +122,6 @@
wrapScrollPosition: function(transitionTime) { wrapScrollPosition: function(transitionTime) {
var _this = this; var _this = this;
window.requestAnimationFrame(function() {
var totalWidth = _this.el.scrollWidth; var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.scrollHeight; var totalHeight = _this.el.scrollHeight;
var parentWidth = _this.el.parentNode.offsetWidth; var parentWidth = _this.el.parentNode.offsetWidth;
@ -150,7 +152,6 @@
_this.scrollTo(x, y, transitionTime || 0, _this.bounceEasing); _this.scrollTo(x, y, transitionTime || 0, _this.bounceEasing);
return true; return true;
});
}, },
_wheel: function(e) { _wheel: function(e) {
@ -227,11 +228,14 @@
destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin; destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
distance = Math.abs(destination - current); distance = Math.abs(destination - current);
duration = distance / speed; duration = distance / speed;
console.log("MOMENTUM TOO FAR DOWN", destination);
} else if ( destination > 0 ) { } else if ( destination > 0 ) {
// We have dragged too far up, snap back to 0 // We have dragged too far up, snap back to 0
destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0; destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
distance = Math.abs(current) + destination; distance = Math.abs(current) + destination;
duration = distance / speed; duration = distance / speed;
console.log("MOMENTUM TOO FAR UP", destination);
} }
console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration); console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration);
@ -459,8 +463,8 @@
// Calculate the viewport height and the height of the content // Calculate the viewport height and the height of the content
var totalWidth = _this.el.scrollWidth; var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.scrollHeight; var totalHeight = _this.el.scrollHeight;
var parentWidth = _this.el.offsetWidth; var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.offsetHeight; var parentHeight = _this.el.parentNode.offsetHeight;
// Calculate how long we've been dragging for, with a max of 300ms // Calculate how long we've been dragging for, with a max of 300ms
var duration = Date.now() - _this._drag.startTime; var duration = Date.now() - _this._drag.startTime;
@ -493,6 +497,7 @@
// If we've moved, we will need to scroll // If we've moved, we will need to scroll
if(newX != _this.x || newY != _this.y) { if(newX != _this.x || newY != _this.y) {
console.trace("SCROLL FROM", _this.x, _this.y, "TO", newX, newY);
// If the end position is out of bounds, change the function we use for easing // If the end position is out of bounds, change the function we use for easing
// to get a different animation for the rubber banding // to get a different animation for the rubber banding