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 );
}
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 );
}
- please check reformulated answer, and provide feedback when able... – Manube Commented Apr 6, 2015 at 17:41
- @Manube sorry, i have no way/time of checking this anymore, i dont even use ionic now, let the munity deal with it, there are quite a few interested people. – Anri Commented Apr 6, 2015 at 21:24
2 Answers
Reset to default 5 +100FOREWORD: This solution was entirely rephrased after ensuring patibility with both ios and android environments; ments below may no longer apply; any feedback is wele.
YES, there is a way to prevent app content from scrolling when you swipe horizontally: by bining 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 plete, 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)
Currently there is no API from ionic team to do that, but i temporary made a monkey patch and feature request. https://github./driftyco/ionic/issues/2703