40

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.

Shekhar Joshi
  • 828
  • 1
  • 12
  • 23

6 Answers6

8

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?

mayur kukadiya
  • 1,296
  • 9
  • 32
5

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;}}});

clickbait
  • 2,461
  • 1
  • 20
  • 50
1

This is also a problem for Mac users who have configured swipe-left to navigate backwards. You can't disable this setting, but you can prompt the user to confirm that they intended to navigate away https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload.

clickbait
  • 2,461
  • 1
  • 20
  • 50
tommyTheHitMan
  • 484
  • 2
  • 8
1

Check out this Codepen by David Hill.

var elem = document.getElementById("container"); //area we don't want touch drag

var defaultPrevent=function(e){e.preventDefault();}
elem.addEventListener("touchstart", defaultPrevent);
elem.addEventListener("touchmove" , defaultPrevent);

I actually think this is a cool way to build objects too.

Jordan Nakamoto
  • 191
  • 1
  • 4
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.

clovola
  • 348
  • 1
  • 11
  • 2
    That disables scrolling as well, though. – Okku Jun 09 '15 at 18:58
  • 1
    You could store the last touch position and just determine if the offset is more vertical or more horizontal, say you had point (1,1); if the next touch move was (3,2) you'd know the user moved more in the horizontal direction than vertical, in which case you would call `preventDefault()`, and otherwise allow it. Here's a similar [post](http://stackoverflow.com/questions/13278087/determine-vertical-direction-of-a-touchmove) – clovola Jun 09 '15 at 19:22
-4
*{
    -webkit-touch-callout: none;
}

The result is to completely deactivate any touch events

Hemanth chalamalasetti
  • 61
  • 5
  • This is only available on safari, and only prevents the callout from displaying rather than preventing touch gestures - the callout is a popup which provides information about a link when you touch and hold it. – Hugheth Mar 03 '19 at 17:32