Disabilita lo spostamento della pagina Web sul passaggio (avanti e indietro)

Question

Su un telefono Windows, in IE gli utenti possono andare avanti e indietro scorrendo sullo schermo se il passaggio viene dal bordo. Questa funzionalità a livello di sistema operativo sta ostacolando la UX della mia pagina web.

C'è js o css che può disattivarlo? Farebbe anche qualche trucco.

Un'istantanea dal sito Web di Windows Phone:

Ecco il link alla pagina di riferimento: http://www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch

prega di notare che ho ancora bisogno touchaction abilitato per lo scorrimento orizzontale.

Answer 1

Come prevenire l'azione predefinita dell'evento di scorrimento. Da qualche parte nel vostro document.ready aggiungere (nota ho incluso il document.ready in questo esempio, solo la funzione deve essere aggiunto):

$(document).ready(function(){ $(window).on('touchmove',function(e){e.preventDefault();}); });

In questo caso credo che l'evento si chiama 'touchmove 'potrebbe essere necessario estenderlo per ignorare anche il comportamento predefinito di touchstart/touchend ma non sono sicuro al 100%.

Answer 2

Questo è anche un problema per gli utenti Mac che hanno configurato lo scorrimento a sinistra per navigare all'indietro. Non è possibile disattivare questa impostazione, ma è possibile chiedere all'utente di confermare che intendevano allontanarsi https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload.

Answer 3

Copia e incolla questo 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; 
     } 
    } 
}); 

Se lo vuoi ridotte di, copiare e incollare questo:

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

Answer 4

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

Il risultato è quello di disattivare completamente tutti gli eventi di tocco

Answer 5

Check out this Codepen di 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); 

Io in realtà penso che questo è un modo intelligente per costruire oggetti troppo.