In Ionic, how to disable vertical scrolling while swiping left?

Question

I am making a Ionic mobile app, whose main view is a vertical list of cards. I want each card to be "swipable", in the same way as Google Now cards.

I started to implement this:

$scope.onDrag = function(event, card){
    $scope.draggedStyle = {
        "left": (event.gesture.deltaX) + "px",
        "-webkit-transform": "translateZ(0)"
    };
}

The problem is that the user can scroll vertically while swiping the card. This is laggy and it's not the behavior I would expect.

Is there a way to disable vertical scroll only when the user is swiping a card?

[edit] I use native scrolling, not JS scrolling.

Answer 1

You can use touchmove event to disable native scrolling. I took beaver's codepen as reference and added a touchmove event which checks for scroll object saved in local storage and disables scrolling if it is set to false. It is working but it is also closing the ionic options buttons in this example. I am sure you can experiment with some other elements and figure it out.

 $window.localStorage["Scroll"] = JSON.stringify(true);
  angular.element($window).bind('touchmove', function(e) {

        var scroll = JSON.parse($window.localStorage["Scroll"]);

       if(!scroll)
       {
         e.preventDefault();
       }

     });

  $scope.disableVerticalScrolling = function() {
    console.log("disableVerticalScrolling");
    $ionicScrollDelegate.getScrollView().options.scrollingY = false;
    $window.localStorage["Scroll"] = JSON.stringify(false);
  }

  $scope.enableVerticalScrolling = function() {
    console.log("enableVerticalScrolling");
    $ionicScrollDelegate.getScrollView().options.scrollingY = true;
     $window.localStorage["Scroll"] = JSON.stringify(true);
  }

Here is the example http://codepen.io/kumar_garapati/pen/jWZMbL?editors=0010

you can read about more touchmove and native scrolling on following pages

https://github.com/phonegap/phonegap/wiki/Prevent-Scrolling

http://blog.ionic.io/native-scrolling-in-ionic-a-tale-in-rhyme/