In Ionic, how to disable vertical scrolling while

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

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 2

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

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

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