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 size limit

Browse Source
This commit is contained in:
Max Lynch
2013-10-25 17:32:23 -05:00
parent a7c7fe1523
commit bb97ff065c
3 changed files with 50 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
dist/js/ionic.js vendored
View File

@ -2604,12 +2604,12 @@ window.ionic = {
window.requestAnimationFrame(function() {
var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.offsetHeight;
var totalHeight = _this.el.scrollHeight;
var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.parentNode.offsetHeight;
var maxX = (-totalWidth + parentWidth);
var maxY = (-totalHeight + parentHeight);
var maxX = Math.min(0, (-totalWidth + parentWidth));
var maxY = Math.min(0, (-totalHeight + parentHeight));
//this._execEvent('scrollEnd');
var x = _this.x, y = _this.y;
@ -2643,7 +2643,7 @@ window.ionic = {
var totalHeight = this.el.offsetHeight;
var parentHeight = this.el.parentNode.offsetHeight;
var maxY = totalHeight - parentHeight;
var maxY = Math.max(0, totalHeight - parentHeight);
var maxX = 0;
// Execute the scrollEnd event after 400ms the wheel stopped scrolling
@ -2770,6 +2770,19 @@ window.ionic = {
var scrollLeft = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var totalWidth = this.el.scrollWidth;
var totalHeight = this.el.scrollHeight;
var parentWidth = this.el.parentNode.offsetWidth;
var parentHeight = this.el.parentNode.offsetHeight;
var maxX = Math.min(0, (-totalWidth + parentWidth));
var maxY = Math.min(0, (-totalHeight + parentHeight));
// Check if we even have enough content to scroll, if not, don't start the drag
if((this.isHorizontalEnabled && maxX == 0) || (this.isVerticalEnabled && maxY == 0)) {
return;
}
this.x = scrollLeft;
this.y = scrollTop;
@ -2806,6 +2819,7 @@ window.ionic = {
// We really aren't dragging
if(!_this._drag) {
_this._startDrag(e);
if(!_this._drag) { return; }
}
// Stop any default events during the drag
@ -2838,9 +2852,11 @@ window.ionic = {
// We are dragging, grab the current content height
var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.offsetHeight;
var totalHeight = _this.el.scrollHeight;
var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.parentNode.offsetHeight;
var maxX = Math.min(0, (-totalWidth + parentWidth));
var maxY = Math.min(0, (-totalHeight + parentHeight));
// Grab current timestamp to keep our speend, etc.
// calculations in a window

26
js/views/scrollView.js
View File

@ -121,12 +121,12 @@
window.requestAnimationFrame(function() {
var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.offsetHeight;
var totalHeight = _this.el.scrollHeight;
var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.parentNode.offsetHeight;
var maxX = (-totalWidth + parentWidth);
var maxY = (-totalHeight + parentHeight);
var maxX = Math.min(0, (-totalWidth + parentWidth));
var maxY = Math.min(0, (-totalHeight + parentHeight));
//this._execEvent('scrollEnd');
var x = _this.x, y = _this.y;
@ -160,7 +160,7 @@
var totalHeight = this.el.offsetHeight;
var parentHeight = this.el.parentNode.offsetHeight;
var maxY = totalHeight - parentHeight;
var maxY = Math.max(0, totalHeight - parentHeight);
var maxX = 0;
// Execute the scrollEnd event after 400ms the wheel stopped scrolling
@ -287,6 +287,19 @@
var scrollLeft = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
var totalWidth = this.el.scrollWidth;
var totalHeight = this.el.scrollHeight;
var parentWidth = this.el.parentNode.offsetWidth;
var parentHeight = this.el.parentNode.offsetHeight;
var maxX = Math.min(0, (-totalWidth + parentWidth));
var maxY = Math.min(0, (-totalHeight + parentHeight));
// Check if we even have enough content to scroll, if not, don't start the drag
if((this.isHorizontalEnabled && maxX == 0) || (this.isVerticalEnabled && maxY == 0)) {
return;
}
this.x = scrollLeft;
this.y = scrollTop;
@ -323,6 +336,7 @@
// We really aren't dragging
if(!_this._drag) {
_this._startDrag(e);
if(!_this._drag) { return; }
}
// Stop any default events during the drag
@ -355,9 +369,11 @@
// We are dragging, grab the current content height
var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.offsetHeight;
var totalHeight = _this.el.scrollHeight;
var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.parentNode.offsetHeight;
var maxX = Math.min(0, (-totalWidth + parentWidth));
var maxY = Math.min(0, (-totalHeight + parentHeight));
// Grab current timestamp to keep our speend, etc.
// calculations in a window

14
test/scroller.html
View File

@ -16,7 +16,7 @@
}
#wrapper {
position: relative;
height: 400px;
height: 100%;
overflow: hidden;
}
</style>
@ -30,7 +30,7 @@
</div>
<div id="wrapper" style="margin-top: 44px">
<div id="scroller" class="scroll">
<div id="filler" style="width: 4400px; height: 1000px; background: url('tree_bark.png') repeat;"></div>
<div id="filler" style="width: 4400px; height: 6000px; background: url('tree_bark.png') repeat;"></div>
</div>
</div>
</section>
@ -38,21 +38,23 @@
<script>
var s = document.getElementById('scroller');
var w = s.scrollWidth;
var w = s.scrollHeight;
for(var i = 0; i < w; i++) {
if((i % 500) === 0) {
var l = document.createElement('span');
l.innerText = i + 'px'
l.style.position = 'absolute';
l.style.left = i + 'px';
l.style.top = '20px';
l.style.left = '20px';
l.style.top = i + 'px';
s.appendChild(l);
}
}
var scroll = new ionic.views.Scroll({
var scroll = new ionic.views.ScrollView({
el: s,
isHorizontalEnabled: false,
isVerticalEnabled: true
});
</script>
</body>