javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(scrollView): nested scrollViews now work independently

Browse Source 
Closes #278
This commit is contained in:
Andy Joslin
2014-02-10 09:53:40 -05:00
parent 38c756b750
commit 4cc4a18c66
2 changed files with 51 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
js/ext/angular/test/nestedScroll.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html ng-app="ionic">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../../../../dist/css/ionic.css" />
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<header-bar title="title" type="bar-positive">
</header-bar>
<content has-header="true" style="background: lightblue;">
<h1>outer</h1>
<scroll style="background: lightgreen; height: 200px;">
<h1>inner</h1>
<p ng-repeat="i in range">{{i}}</p>
</scroll>
<p ng-repeat="i in range">{{i}}</p>
</content>
</div>
<script>
function Ctrl($scope) {
$scope.range = [];
for (var i=0; i<20; i++) {
$scope.range.push(i);
}
}
</script>
</body>
</html>

10
js/views/scrollView.js
View File

@@ -596,6 +596,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
if ('ontouchstart' in window) {
container.addEventListener("touchstart", function(e) {
if (e.__scroller) {
return;
}
// Don't react if initial down happens on a form element
if (e.target.tagName.match(/input|textarea|select/i)) {
return;
@@ -603,6 +606,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
self.doTouchStart(e.touches, e.timeStamp);
e.preventDefault();
//We don't want to stop propagation, other things might want to know about the touchstart
e.__scroller = true;
}, false);
document.addEventListener("touchmove", function(e) {
@@ -621,6 +626,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
var mousedown = false;
container.addEventListener("mousedown", function(e) {
if (e.__scroller) {
return;
}
// Don't react if initial down happens on a form element
if (e.target.tagName.match(/input|textarea|select/i)) {
return;
@@ -631,6 +639,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
pageY: e.pageY
}], e.timeStamp);
//We don't want to stop propagation, other things might want to know about the touchstart
e.__scroller = true;
mousedown = true;
}, false);