0
940
ViewsDisable web page navigation on swipe(back and forward)
On a Windows phone, in IE users can go back and forward by swiping on the screen if the swipe is coming from the edge. This OS level functionality is hampering my webpage's UX.
Is there any js or css which can disable that? Some hack would also do.
A snapshot from windowsphone's website:
Here is the link to the reference page: http://www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch
Please note that I still need touchaction enabled for horizontal scrolling.
3 answers
Answer question0
You Should Try this solution in two way :
1) CSS only fix for Chrome/Firefox
html, body {
overscroll-behavior-x: none;
}
2) JavaScript fix for Safari
if (window.safari) {
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
}
Over time, Safari will implement overscroll-behavior-x and we'll be able to remove the JS hack
Possible duplicate of iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?
0
Copy and paste this JavaScript:
var xPos = null;
var yPos = null;
window.addEventListener( "touchmove", function ( event ) {
var touch = event.originalEvent.touches[ 0 ];
oldX = xPos;
oldY = yPos;
xPos = touch.pageX;
yPos = touch.pageY;
if ( oldX == null && oldY == null ) {
return false;
}
else {
if ( Math.abs( oldX-xPos ) > Math.abs( oldY-yPos ) ) {
event.preventDefault();
return false;
}
}
} );
If you want it minified, copy and paste this:
var xPos=null;var yPos=null;window.addEventListener("touchmove",function(event){var touch=event.originalEvent.touches[0];oldX=xPos;oldY=yPos;xPos=touch.pageX;yPos=touch.pageY;if(oldX==null && oldY==null){return false;}else{if(Math.abs(oldX-xPos)>Math.abs(oldY-yPos)){event.preventDefault();return false;}}});
0
How about preventing the default action of the swipe event. Somewhere in your document.ready add (note I've included the document.ready in this example, only the function needs to be added):
$(document).ready(function(){
$(window).on('touchmove',function(e){e.preventDefault();});
});
In this case I believe the event is called 'touchmove'you may need to extend this to also ignore default behavior of touchstart/touchend but I'm not 100% sure.