fix(scrollView): nested scrollViews now work independently

Closes #278
ionic-team · Feb 10, 2014 · 4cc4a18 · 4cc4a18
1 parent 38c756b
commit 4cc4a18
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/js/ext/angular/test/nestedScroll.html b/js/ext/angular/test/nestedScroll.html
@@ -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>
diff --git a/js/views/scrollView.js b/js/views/scrollView.js
@@ -596,13 +596,18 @@ 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;
         }
 
         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);