Javascript – Disable web page navigation on swipe(back and forward)

cssinternet-explorerjavascriptwindows-phone-8windows-phone-8.1

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:
enter image description here

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.

Best Solution

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?