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 imple

Answer 1

Try to use freezeScroll. Refer to How to disable content scrolling? and How to prevent vertical scroll on swipe left/right

Answer 2

Maybe you can try inspiration by this example based on CSS:

.no-scroll{
  pointer-events: none;
}

For example you could add the no-scroll class (using ngClass) during swipe-left operation.

Answer 3

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/

Answer 4

Another approach uses $ionicScrollDelegate to enable/disable vertical scrolling when needed.

So, for example, in each <ion-item> add on-drag-left and on-drag-right event handlers:

    <ion-item ng-repeat="item in items" 
              item="item"
              on-drag-left="disableVerticalScrolling()"
              on-drag-right="enableVerticalScrolling()"
    ...

In those handlers $ionicScrollDelegate is used as in code below:

  $scope.disableVerticalScrolling = function() {
    $ionicScrollDelegate.getScrollView().options.scrollingY = false;
  }

  $scope.enableVerticalScrolling = function() {
    $ionicScrollDelegate.getScrollView().options.scrollingY = true;
  }

These functions are also called when finished some operations done by option buttons (i.e. edit, delete, share, ...).

Here is an example showing this approach:

http://codepen.io/beaver71/pen/XXVzXa?editors=101