CODEWITHSUNDEEP
javascriptcssinternet-explorerwindows-phone-8windows-phone-8.1
Shekhar Joshi
Shekhar Joshi

Reputation: 1008

Disable 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: 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.

Upvotes: 51

Views: 31542

Answers (6)

Mayur Kukadiya
Mayur Kukadiya

Reputation: 2747

For all modern browsers use overscroll-behavior-x:

 html, body {
    overscroll-behavior-x: none;
}

For old Safari versions (older than v16 released 2022-09-12) use this:

if (window.safari) {
  history.pushState(null, null, location.href);
  window.onpopstate = function(event) {
      history.go(1);
  };
}

Possible duplicate of iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

Upvotes: 29

Jordan Nakamoto
Jordan Nakamoto

Reputation: 401

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.

Upvotes: 2

Hemanth chalamalasetti
Hemanth chalamalasetti

Reputation: 89

*{
    -webkit-touch-callout: none;
}

The result is to completely deactivate any touch events

Upvotes: -5

tommyTheHitMan
tommyTheHitMan

Reputation: 482

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.

Upvotes: 0

clickbait
clickbait

Reputation: 2998

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

Upvotes: 4

clovola
clovola

Reputation: 378

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.

Upvotes: 1

Related Questions