fix(scrolling): Prevent gestures from breaking native scrolling

ionic-team · Mar 19, 2015 · e917cae · MartinMa · Apr 1, 2015 · e917cae
1 parent 7bf1207
commit e917cae
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/js/angular/directive/sideMenuContent.js b/js/angular/directive/sideMenuContent.js
@@ -182,6 +182,9 @@ function($timeout, $ionicGesture, $window) {
 
         // add gesture handlers
         var gestureOpts = { stop_browser_behavior: false };
+        if (ionic.DomUtil.getParentOrSelfWithClass($element[0],'overflow-scroll')) {
+          gestureOpts.prevent_default_directions = ['left','right'];
+        }
         var contentTapGesture = $ionicGesture.on('tap', onContentTap, $element, gestureOpts);
         var dragRightGesture = $ionicGesture.on('dragright', onDragX, $element, gestureOpts);
         var dragLeftGesture = $ionicGesture.on('dragleft', onDragX, $element, gestureOpts);

diff --git a/js/utils/gestures.js b/js/utils/gestures.js
@@ -1160,16 +1160,19 @@
       drag_lock_to_axis       : false,
       // drag lock only kicks in when distance > drag_lock_min_distance
       // This way, locking occurs only when the distance has become large enough to reliably determine the direction
-      drag_lock_min_distance : 25
+      drag_lock_min_distance : 25,
+      // prevent default if the gesture is going the given direction
+      prevent_default_directions : []
     },
     triggered: false,
     handler: function dragGesture(ev, inst) {
-
       if (ev.srcEvent.type == 'touchstart' || ev.srcEvent.type == 'touchend') {
         this.preventedFirstMove = false;
 
       } else if (!this.preventedFirstMove && ev.srcEvent.type == 'touchmove') {
-        ev.srcEvent.preventDefault();
+        if (inst.options.prevent_default_directions.indexOf(ev.direction) != -1) {
+          ev.srcEvent.preventDefault();
+        }
         this.preventedFirstMove = true;
       }
 

diff --git a/js/views/listView.js b/js/views/listView.js
@@ -394,13 +394,19 @@
       self.onRefreshOpening = opts.onRefreshOpening || function() {};
       self.onRefreshHolding = opts.onRefreshHolding || function() {};
 
+      var gestureOpts = {};
+      // don't prevent native scrolling
+      if (ionic.DomUtil.getParentOrSelfWithClass(self.el,'overflow-scroll')) {
+        gestureOpts.prevent_default_directions = ['left','right'];
+      }
+
       window.ionic.onGesture('release', function(e) {
         self._handleEndDrag(e);
-      }, self.el);
+      }, self.el, gestureOpts);
 
       window.ionic.onGesture('drag', function(e) {
         self._handleDrag(e);
-      }, self.el);
+      }, self.el, gestureOpts);
       // Start the drag states
       self._initDrag();
     },

diff --git a/test/unit/angular/directive/list.unit.js b/test/unit/angular/directive/list.unit.js
@@ -25,6 +25,22 @@ describe('ionList directive', function() {
     expect(el.children().html()).toBe('<hello></hello>');
   });
 
+  it('should provide gesture prevent_default_directions if native scrolling', function() {
+    spyOn(window.ionic,'onGesture');
+
+    var el = setup('', '<hello></hello>');
+    flush();
+    expect(window.ionic.onGesture).toHaveBeenCalled();
+    args = window.ionic.onGesture.mostRecentCall.args;
+    expect(args[3]).toEqual({});
+
+    var el = setup('class="overflow-scroll"', '<hello></hello>');
+    flush();
+    var gestureOpts = {prevent_default_directions: ['left','right']};
+    args = window.ionic.onGesture.mostRecentCall.args;
+    expect(args[3]).toEqual(gestureOpts);
+  });
+
   it('should give options to listView after init', function() {
     var options;
     spyOn(ionic.views, 'ListView').andCallFake(function(o) {