How to prevent vertical scroll on swipe left/right

All we need is an easy explanation of the problem, so here it is.

When I try to swipe left/right my app content also scrolls vertically creating messy UX. Is there a way to prevent it?

This is how I handle swipe

// angular directive
link: function(scope, element, attrs) {
        $ionicGesture.on('swiperight', function(){console.log("swiped");}, element );
}

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

FOREWORD: This solution was entirely rephrased after ensuring compatibility with both ios and android environments; comments below may no longer apply; any feedback is welcome.


YES, there is a way to prevent app content from scrolling when you swipe horizontally: by combining an angularjs tapDetector directive with ionic $ionicScrollDelegate service.

We will also need to detect the swipe using very fast dom events detection (mousedown/touchstart, mousemove/touchmove, mouseup/touchend);
it is necessary because $ionicGesture event listener detects the swipe after the scroll has been done: detection for swipe in ionic is to slow for our purpose.


The tapDetector directive is placed on body like so:

<body ng-controller="MyCtrl" tap-detector>

And here is the code for the directive:

.directive('tapDetector',function($ionicGesture,$ionicScrollDelegate){
  return{
    restrict:'EA',
    link:function(scope,element){
      var startX,startY,isDown=false;
      element.bind("mousedown touchstart", function(e){
        e=(e.touches)?e.touches[0]:e;//e.touches[0] is for ios
        startX = e.clientX;
        startY = e.clientY;
        isDown=true;
        //console.log("mousedown",startX,startY);
      });

      element.bind("mousemove touchmove", function(e){
        e=(e.touches)?e.touches[0]:e;//e.touches[0] is for ios
        if(isDown){
          var deltaX = Math.abs(e.clientX - startX);
                var deltaY = Math.abs(e.clientY - startY);

          if(deltaX > deltaY) {
          //console.log("horizontal move");
            $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);
            }
        }
      });

      element.bind("mouseup touchend", function(e){
        isDown=false;
        $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false);
        //console.log("mouseup touchend");
      });
    }
  }
})

When you touch the screen (preparation for swipe), the coordinates of touch are set (startX, startY) and isDown is set to true.

When you start swiping, we need to determine whether swipe is horizontal or vertical. We are only interested in horizontal swipes:

var deltaX = Math.abs(e.clientX - startX);
var deltaY = Math.abs(e.clientY - startY);

deltaX is the difference (delta) between original X and current X;
deltaY is the difference (delta) between original Y and current Y;

if (deltaX > deltaY)

We got an horizontal swipe!

Now the swipe has been detected fast enough, all that is left to be done is to dynamically prevent the scroll:

$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);

and in the HTML: <ion-content delegate-handle="mainScroll">


After scroll is complete, we must un-freeze (thaw?) the scroll:

element.bind("mouseup touchend", function(e){
                    isDown=false;
                    $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false);
                });

This was tested with iPad 2
and Android Galaxy S4


Almost forgot: here is a working pen (courtesy of sMr)

Method 2

Currently there is no API from ionic team to do that, but i temporary made a monkey patch and feature request. https://github.com/driftyco/ionic/issues/2703

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply