FOREWORD: this solution has been completely re-phrased after ensuring compatibility with ios and android environments; the comments below may no longer apply; Any feedback is appreciated.
YES , there is a way to prevent the contents of the application from scrolling when scrolling horizontally: by combining the angularjs tapDetector directive with the ionic service $ionicScrollDelegate .
We will also need to detect swipe using very fast dom event detection ( mousedown / touchstart , mousemove / touchmove , mouseup / touchend ); this is necessary because the $ionicGesture event listener detects swipes after scrolling: detection for swabs in ionic form slows down for our purpose.
The tapDetector directive is placed on the body like this:
<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 (preparing to scroll), the touch coordinates are set (startX, startY) and isDown set to true.
When you start to scroll, we need to determine if the swipe is horizontal or vertical. We are only interested in horizontal deflections:
var deltaX = Math.abs(e.clientX - startX); var deltaY = Math.abs(e.clientY - startY);
deltaX - difference (delta) between the original X and current X; deltaY - the difference (delta) between the original Y and current Y;
if (deltaX > deltaY)
We got a horizontal swipe!
Now scrolling was detected quickly enough, all you need to do is to dynamically prevent scrolling:
$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);
and in HTML: <ion-content delegate-handle="mainScroll">
After the scrolling is completed, we must defrost (thaw?) The scrolling:
element.bind("mouseup touchend", function(e){ isDown=false; $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false); });
This has been tested with iPad 2 and Android Galaxy S4.
Almost forgot: here is a working pen (kindly smr)