mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Don't even try to use the scroll shit, it's broken
This commit is contained in:
Max Lynch
2357
dist/css/ionic-ios7.css
vendored
2357
dist/css/ionic-ios7.css
vendored
File diff suppressed because it is too large
Load Diff
198
dist/js/ionic.js
vendored
198
dist/js/ionic.js
vendored
@ -2493,7 +2493,9 @@ window.ionic = {
|
||||
dragThresholdY: 10,
|
||||
resistance: 2,
|
||||
scrollEventName: 'momentumScrolled',
|
||||
intertialEventInterval: 50
|
||||
intertialEventInterval: 50,
|
||||
|
||||
bounceTime: 600 //how long to take when bouncing back in a rubber band
|
||||
});
|
||||
|
||||
ionic.Utils.extend(this, opts);
|
||||
@ -2517,6 +2519,37 @@ window.ionic = {
|
||||
DECEL_RATE_FAST: 0.99,
|
||||
DECEL_RATE_SLOW: 0.996,
|
||||
|
||||
_getMomentum: function (current, start, time, lowerMargin, wrapperSize) {
|
||||
var distance = current - start,
|
||||
speed = Math.abs(distance) / time,
|
||||
destination,
|
||||
duration,
|
||||
deceleration = 0.0006;
|
||||
|
||||
// Calculate the final desination
|
||||
destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
|
||||
duration = speed / deceleration;
|
||||
|
||||
// Check if the final destination needs to be rubber banded
|
||||
if ( destination < lowerMargin ) {
|
||||
// We have dragged too far down, snap back to the maximum
|
||||
destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
|
||||
distance = Math.abs(destination - current);
|
||||
duration = distance / speed;
|
||||
} else if ( destination > 0 ) {
|
||||
// We have dragged too far up, snap back to 0
|
||||
destination = 0;//wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
|
||||
distance = Math.abs(current) + destination;
|
||||
duration = distance / speed;
|
||||
}
|
||||
|
||||
console.log('Momentum of time', time, speed, destination, duration);
|
||||
return {
|
||||
destination: Math.round(destination),
|
||||
duration: duration
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Scroll to the given X and Y point, taking
|
||||
* the given amount of time, with the given
|
||||
@ -2562,6 +2595,8 @@ window.ionic = {
|
||||
this._isStopped = false;
|
||||
},
|
||||
|
||||
|
||||
|
||||
_endTransition: function() {
|
||||
this._isDragging = false;
|
||||
this._drag = null;
|
||||
@ -2573,6 +2608,8 @@ window.ionic = {
|
||||
clearTimeout(this._momentumStepTimeout)
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Initialize a drag by grabbing the content area to drag, and any other
|
||||
* info we might need for the dragging.
|
||||
@ -2585,76 +2622,90 @@ window.ionic = {
|
||||
var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
|
||||
|
||||
this._drag = {
|
||||
direction: 'v',
|
||||
y: scrollTop,
|
||||
pointY: e.gesture.touches[0].pageY,
|
||||
startY: scrollTop,
|
||||
resist: 1,
|
||||
startTime: +(new Date)
|
||||
startTime: Date.now()
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Process the drag event to move the item to the left or right.
|
||||
*/
|
||||
_handleDrag: function(e) {
|
||||
var _this = this;
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
var content;
|
||||
var content;
|
||||
|
||||
// The drag stopped already, don't process this one
|
||||
if(_this._isStopped) {
|
||||
_this._initDrag();
|
||||
return;
|
||||
}
|
||||
// The drag stopped already, don't process this one
|
||||
if(_this._isStopped) {
|
||||
_this._initDrag();
|
||||
return;
|
||||
}
|
||||
|
||||
// We really aren't dragging
|
||||
if(!_this._drag) {
|
||||
_this._startDrag(e);
|
||||
}
|
||||
// We really aren't dragging
|
||||
if(!_this._drag) {
|
||||
_this._startDrag(e);
|
||||
}
|
||||
|
||||
// Stop any default events during the drag
|
||||
e.preventDefault();
|
||||
// Stop any default events during the drag
|
||||
e.preventDefault();
|
||||
|
||||
var py = e.gesture.touches[0].pageY;
|
||||
var deltaY = py - _this._drag.pointY;
|
||||
console.log("Delta y", deltaY);
|
||||
var py = e.gesture.touches[0].pageY;
|
||||
var deltaY = py - _this._drag.pointY;
|
||||
console.log("Delta y", deltaY);
|
||||
|
||||
_this._drag.pointY = py;
|
||||
_this._drag.pointY = py;
|
||||
|
||||
// Check if we should start dragging. Check if we've dragged past the threshold.
|
||||
if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
|
||||
_this._isDragging = true;
|
||||
}
|
||||
|
||||
if(_this._isDragging) {
|
||||
// Check if we should start dragging. Check if we've dragged past the threshold.
|
||||
if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
|
||||
_this._isDragging = true;
|
||||
}
|
||||
|
||||
if(_this._isDragging) {
|
||||
var drag = _this._drag;
|
||||
window.requestAnimationFrame(function() {
|
||||
// We are dragging, grab the current content height
|
||||
// and the height of the parent container
|
||||
var totalHeight = _this.el.offsetHeight;
|
||||
var parentHeight = _this.el.parentNode.offsetHeight;
|
||||
var timestamp = Date.now();
|
||||
|
||||
// Calculate the new Y point for the container
|
||||
var newY = _this._drag.y + deltaY;
|
||||
var newY = drag.y + deltaY;
|
||||
|
||||
// Check if the dragging is beyond the bottom or top
|
||||
if(newY > 0 || (-newY + parentHeight) > totalHeight) {
|
||||
// Rubber band
|
||||
newY = _this._drag.y + deltaY / 3;//(-_this.resistance);
|
||||
newY = drag.y + deltaY / 3;//(-_this.resistance);
|
||||
}
|
||||
// Update the new translated Y point of the container
|
||||
_this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
|
||||
|
||||
_this._drag.y = newY;
|
||||
drag.y = newY;
|
||||
|
||||
// Check if we need to reset the drag initial states if we've
|
||||
// been dragging for a bit
|
||||
if(timestamp - drag.startTime > 300) {
|
||||
console.log('Resetting timer');
|
||||
drag.startTime = timestamp;
|
||||
drag.startY = drag.y;
|
||||
}
|
||||
|
||||
ionic.trigger(_this.scrollEventName, {
|
||||
target: _this.el,
|
||||
scrollTop: -newY
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
_handleEndDrag: function(e) {
|
||||
// We didn't have a drag, so just init and leave
|
||||
if(!this._drag) {
|
||||
@ -2672,56 +2723,59 @@ window.ionic = {
|
||||
},
|
||||
|
||||
|
||||
// Find the stopping point given the current velocity and acceleration rate, and
|
||||
// animate to that position
|
||||
_animateToStop: function(e) {
|
||||
var _this = this;
|
||||
|
||||
var totalHeight = this.el.offsetHeight;
|
||||
var parentHeight = this.el.parentNode.offsetHeight;
|
||||
var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
|
||||
var duration = +(new Date) - this._drag.startTime;
|
||||
|
||||
var newY = scrollTop;
|
||||
|
||||
if(e.gesture.velocityY) {
|
||||
// Get the final resting point
|
||||
var vy = e.gesture.velocityY;
|
||||
var speed = Math.abs(e.gesture.deltaY) / duration;
|
||||
//newY = newY + (vy * vy) / (0.05 * this.decelerationRate);
|
||||
|
||||
var destination = newY + ( speed * speed ) / ( 2 * (1-_this.decelerationRate)) * ( e.gesture.deltaY < 0 ? -1 : 1 );
|
||||
var dur = speed / (1-_this.decelerationRate);
|
||||
|
||||
if((-destination + parentHeight) > totalHeight) {
|
||||
destination = -(totalHeight - parentHeight);
|
||||
} else if(destination > 0) {
|
||||
destination = 0;
|
||||
}
|
||||
|
||||
console.log('Ending at velocity and point', speed, vy, destination, dur);
|
||||
|
||||
|
||||
var el = this.el;
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
_this.scrollTo(0, destination, dur);
|
||||
});
|
||||
if(this._drag.direction == 'v') {
|
||||
this._animateToStopVertical(e);
|
||||
} else {
|
||||
this._animateToStopHorizontal(e);
|
||||
}
|
||||
|
||||
/*
|
||||
// Check if the dragging is beyond the bottom or top
|
||||
*/
|
||||
},
|
||||
|
||||
/*
|
||||
setTimeout(function() {
|
||||
window.requestAnimationFrame(function() {
|
||||
_this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
|
||||
});
|
||||
}, 50);
|
||||
*/
|
||||
_animateToStopHorizontal: function(e) {
|
||||
},
|
||||
|
||||
_animateToStopVertical: function(e) {
|
||||
var _this = this;
|
||||
window.requestAnimationFrame(function() {
|
||||
var drag = _this._drag;
|
||||
|
||||
// Turn on animation
|
||||
this.el.classList.add('scroll-scrolling');
|
||||
// Calculate the viewport height and the height of the content
|
||||
var totalHeight = _this.el.offsetHeight;
|
||||
var parentHeight = _this.el.parentNode.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 newX = Math.round(this.x),
|
||||
var newY = Math.round(drag.y);
|
||||
//distanceX = Math.abs(newX - this.startX),
|
||||
//var distanceY = Math.abs(newY - drag.startY);
|
||||
|
||||
|
||||
var momentum = _this._getMomentum(drag.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
|
||||
//var newX = momentumX.destination;
|
||||
newY = momentum.destination;
|
||||
var time = momentum.duration;
|
||||
|
||||
if(drag.y > 0) {
|
||||
_this.scrollTo(0, 0, _this.bounceTime);
|
||||
return;
|
||||
} else if ((-drag.y + parentHeight) > totalHeight) {
|
||||
_this.scrollTo(0, totalHeight - parentHeight, _this.bounceTime);
|
||||
return;
|
||||
}
|
||||
|
||||
var el = _this.el;
|
||||
|
||||
// Turn on animation
|
||||
_this.scrollTo(0, newY, time);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -10,7 +10,9 @@
|
||||
dragThresholdY: 10,
|
||||
resistance: 2,
|
||||
scrollEventName: 'momentumScrolled',
|
||||
intertialEventInterval: 50
|
||||
intertialEventInterval: 50,
|
||||
|
||||
bounceTime: 600 //how long to take when bouncing back in a rubber band
|
||||
});
|
||||
|
||||
ionic.Utils.extend(this, opts);
|
||||
@ -34,6 +36,37 @@
|
||||
DECEL_RATE_FAST: 0.99,
|
||||
DECEL_RATE_SLOW: 0.996,
|
||||
|
||||
_getMomentum: function (current, start, time, lowerMargin, wrapperSize) {
|
||||
var distance = current - start,
|
||||
speed = Math.abs(distance) / time,
|
||||
destination,
|
||||
duration,
|
||||
deceleration = 0.0006;
|
||||
|
||||
// Calculate the final desination
|
||||
destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
|
||||
duration = speed / deceleration;
|
||||
|
||||
// Check if the final destination needs to be rubber banded
|
||||
if ( destination < lowerMargin ) {
|
||||
// We have dragged too far down, snap back to the maximum
|
||||
destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
|
||||
distance = Math.abs(destination - current);
|
||||
duration = distance / speed;
|
||||
} else if ( destination > 0 ) {
|
||||
// We have dragged too far up, snap back to 0
|
||||
destination = 0;//wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
|
||||
distance = Math.abs(current) + destination;
|
||||
duration = distance / speed;
|
||||
}
|
||||
|
||||
console.log('Momentum of time', time, speed, destination, duration);
|
||||
return {
|
||||
destination: Math.round(destination),
|
||||
duration: duration
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Scroll to the given X and Y point, taking
|
||||
* the given amount of time, with the given
|
||||
@ -79,6 +112,8 @@
|
||||
this._isStopped = false;
|
||||
},
|
||||
|
||||
|
||||
|
||||
_endTransition: function() {
|
||||
this._isDragging = false;
|
||||
this._drag = null;
|
||||
@ -90,6 +125,8 @@
|
||||
clearTimeout(this._momentumStepTimeout)
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Initialize a drag by grabbing the content area to drag, and any other
|
||||
* info we might need for the dragging.
|
||||
@ -102,76 +139,90 @@
|
||||
var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
|
||||
|
||||
this._drag = {
|
||||
direction: 'v',
|
||||
y: scrollTop,
|
||||
pointY: e.gesture.touches[0].pageY,
|
||||
startY: scrollTop,
|
||||
resist: 1,
|
||||
startTime: +(new Date)
|
||||
startTime: Date.now()
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Process the drag event to move the item to the left or right.
|
||||
*/
|
||||
_handleDrag: function(e) {
|
||||
var _this = this;
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
var content;
|
||||
var content;
|
||||
|
||||
// The drag stopped already, don't process this one
|
||||
if(_this._isStopped) {
|
||||
_this._initDrag();
|
||||
return;
|
||||
}
|
||||
// The drag stopped already, don't process this one
|
||||
if(_this._isStopped) {
|
||||
_this._initDrag();
|
||||
return;
|
||||
}
|
||||
|
||||
// We really aren't dragging
|
||||
if(!_this._drag) {
|
||||
_this._startDrag(e);
|
||||
}
|
||||
// We really aren't dragging
|
||||
if(!_this._drag) {
|
||||
_this._startDrag(e);
|
||||
}
|
||||
|
||||
// Stop any default events during the drag
|
||||
e.preventDefault();
|
||||
// Stop any default events during the drag
|
||||
e.preventDefault();
|
||||
|
||||
var py = e.gesture.touches[0].pageY;
|
||||
var deltaY = py - _this._drag.pointY;
|
||||
console.log("Delta y", deltaY);
|
||||
var py = e.gesture.touches[0].pageY;
|
||||
var deltaY = py - _this._drag.pointY;
|
||||
console.log("Delta y", deltaY);
|
||||
|
||||
_this._drag.pointY = py;
|
||||
_this._drag.pointY = py;
|
||||
|
||||
// Check if we should start dragging. Check if we've dragged past the threshold.
|
||||
if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
|
||||
_this._isDragging = true;
|
||||
}
|
||||
|
||||
if(_this._isDragging) {
|
||||
// Check if we should start dragging. Check if we've dragged past the threshold.
|
||||
if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) {
|
||||
_this._isDragging = true;
|
||||
}
|
||||
|
||||
if(_this._isDragging) {
|
||||
var drag = _this._drag;
|
||||
window.requestAnimationFrame(function() {
|
||||
// We are dragging, grab the current content height
|
||||
// and the height of the parent container
|
||||
var totalHeight = _this.el.offsetHeight;
|
||||
var parentHeight = _this.el.parentNode.offsetHeight;
|
||||
var timestamp = Date.now();
|
||||
|
||||
// Calculate the new Y point for the container
|
||||
var newY = _this._drag.y + deltaY;
|
||||
var newY = drag.y + deltaY;
|
||||
|
||||
// Check if the dragging is beyond the bottom or top
|
||||
if(newY > 0 || (-newY + parentHeight) > totalHeight) {
|
||||
// Rubber band
|
||||
newY = _this._drag.y + deltaY / 3;//(-_this.resistance);
|
||||
newY = drag.y + deltaY / 3;//(-_this.resistance);
|
||||
}
|
||||
// Update the new translated Y point of the container
|
||||
_this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
|
||||
|
||||
_this._drag.y = newY;
|
||||
drag.y = newY;
|
||||
|
||||
// Check if we need to reset the drag initial states if we've
|
||||
// been dragging for a bit
|
||||
if(timestamp - drag.startTime > 300) {
|
||||
console.log('Resetting timer');
|
||||
drag.startTime = timestamp;
|
||||
drag.startY = drag.y;
|
||||
}
|
||||
|
||||
ionic.trigger(_this.scrollEventName, {
|
||||
target: _this.el,
|
||||
scrollTop: -newY
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
_handleEndDrag: function(e) {
|
||||
// We didn't have a drag, so just init and leave
|
||||
if(!this._drag) {
|
||||
@ -189,56 +240,59 @@
|
||||
},
|
||||
|
||||
|
||||
// Find the stopping point given the current velocity and acceleration rate, and
|
||||
// animate to that position
|
||||
_animateToStop: function(e) {
|
||||
var _this = this;
|
||||
|
||||
var totalHeight = this.el.offsetHeight;
|
||||
var parentHeight = this.el.parentNode.offsetHeight;
|
||||
var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
|
||||
var duration = +(new Date) - this._drag.startTime;
|
||||
|
||||
var newY = scrollTop;
|
||||
|
||||
if(e.gesture.velocityY) {
|
||||
// Get the final resting point
|
||||
var vy = e.gesture.velocityY;
|
||||
var speed = Math.abs(e.gesture.deltaY) / duration;
|
||||
//newY = newY + (vy * vy) / (0.05 * this.decelerationRate);
|
||||
|
||||
var destination = newY + ( speed * speed ) / ( 2 * (1-_this.decelerationRate)) * ( e.gesture.deltaY < 0 ? -1 : 1 );
|
||||
var dur = speed / (1-_this.decelerationRate);
|
||||
|
||||
if((-destination + parentHeight) > totalHeight) {
|
||||
destination = -(totalHeight - parentHeight);
|
||||
} else if(destination > 0) {
|
||||
destination = 0;
|
||||
}
|
||||
|
||||
console.log('Ending at velocity and point', speed, vy, destination, dur);
|
||||
|
||||
|
||||
var el = this.el;
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
_this.scrollTo(0, destination, dur);
|
||||
});
|
||||
if(this._drag.direction == 'v') {
|
||||
this._animateToStopVertical(e);
|
||||
} else {
|
||||
this._animateToStopHorizontal(e);
|
||||
}
|
||||
|
||||
/*
|
||||
// Check if the dragging is beyond the bottom or top
|
||||
*/
|
||||
},
|
||||
|
||||
/*
|
||||
setTimeout(function() {
|
||||
window.requestAnimationFrame(function() {
|
||||
_this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)';
|
||||
});
|
||||
}, 50);
|
||||
*/
|
||||
_animateToStopHorizontal: function(e) {
|
||||
},
|
||||
|
||||
_animateToStopVertical: function(e) {
|
||||
var _this = this;
|
||||
window.requestAnimationFrame(function() {
|
||||
var drag = _this._drag;
|
||||
|
||||
// Turn on animation
|
||||
this.el.classList.add('scroll-scrolling');
|
||||
// Calculate the viewport height and the height of the content
|
||||
var totalHeight = _this.el.offsetHeight;
|
||||
var parentHeight = _this.el.parentNode.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 newX = Math.round(this.x),
|
||||
var newY = Math.round(drag.y);
|
||||
//distanceX = Math.abs(newX - this.startX),
|
||||
//var distanceY = Math.abs(newY - drag.startY);
|
||||
|
||||
|
||||
var momentum = _this._getMomentum(drag.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
|
||||
//var newX = momentumX.destination;
|
||||
newY = momentum.destination;
|
||||
var time = momentum.duration;
|
||||
|
||||
if(drag.y > 0) {
|
||||
_this.scrollTo(0, 0, _this.bounceTime);
|
||||
return;
|
||||
} else if ((-drag.y + parentHeight) > totalHeight) {
|
||||
_this.scrollTo(0, totalHeight - parentHeight, _this.bounceTime);
|
||||
return;
|
||||
}
|
||||
|
||||
var el = _this.el;
|
||||
|
||||
// Turn on animation
|
||||
_this.scrollTo(0, newY, time);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
s.addEventListener('momentumScrolled', function(e) {
|
||||
setTimeout(function() {
|
||||
var bgAmount = e.detail.scrollTop;
|
||||
bgImage.style.webkitTransform = 'translate3d(0, ' + -(bgAmount / 40) + 'px, 0)';
|
||||
//bgImage.style.webkitTransform = 'translate3d(0, ' + -(bgAmount / 20) + 'px, 0)';
|
||||
|
||||
//var blurAmount = Math.min(3, e.detail.scrollTop / 200);
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<h1 class="title">Scroll Me</h1>
|
||||
<a href="#" class="button button-danger button-clear">Delete</a>
|
||||
</div>
|
||||
<div id="scroller" class="scroll" style="margin-top:44px">
|
||||
<div id="scroller" class="scroll" style="top:44px">
|
||||
<!--<div id="filler" style="height: 1400px; background: url('tree_bark.png') repeat;"></div>-->
|
||||
<ul class="list">
|
||||
</ul>
|
||||
|
||||
46
test/scroll_horiz.html
Normal file
46
test/scroll_horiz.html
Normal file
@ -0,0 +1,46 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Scroll Horiz</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
<style>
|
||||
#filler {
|
||||
border-top: 10px solid red;
|
||||
border-bottom: 10px solid red;
|
||||
}
|
||||
.list-item {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="view-full">
|
||||
<div class="bar bar-header bar-secondary">
|
||||
<a href="#" class="button button-danger button-clear">Edit</a>
|
||||
<h1 class="title">Scroll Me</h1>
|
||||
<a href="#" class="button button-danger button-clear">Delete</a>
|
||||
</div>
|
||||
<div id="scroller" class="scroll" style="margin-top:44px">
|
||||
<div id="filler" style="width: 1400px; height: 300px; background: url('tree_bark.png') repeat;"></div>
|
||||
</div>
|
||||
</section>
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
<script>
|
||||
var s = document.getElementById('scroller');
|
||||
|
||||
for(var i = 0; i < 100; i++) {
|
||||
var li = document.createElement('li');
|
||||
li.className = 'list-item';
|
||||
li.innerHTML = 'Item ' + i;
|
||||
s.firstElementChild.appendChild(li);
|
||||
}
|
||||
|
||||
var scroll = new ionic.views.ScrollView({
|
||||
el: s
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user