0
939
ViewsDeshabilitar la navegación de la página web al deslizar (hacia atrás y hacia adelante)
En un teléfono con Windows, en IE los usuarios pueden retroceder y avanzar deslizando la pantalla si el deslizamiento proviene del borde. Esta funcionalidad de nivel de sistema operativo está obstaculizando la experiencia de usuario de mi página web.
¿Hay algún js o css que pueda deshabilitar eso? Algún truco también serviría.
Una instantánea del sitio web de Windows Phone:
Aquí está el enlace a la página de referencia: http://www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch
Tenga en cuenta que todavía necesito la acción táctil habilitada para el desplazamiento horizontal.
3 answers
Answer question0
Debería probar esta solución de dos maneras:
1) Corrección de CSS solo para Chrome/Firefox
html, body { overscroll-behavior-x: none; }2) Corrección de JavaScript para Safari
if (window.safari) { history.pushState(null, null, location.href); window.onpopstate = function(event) { history.go(1); }; }Con el tiempo, Safari implementará overscroll-behavior-x y podremos eliminar el hack JS
Posible duplicado de iOS 7: ¿hay alguna forma de desactivar la funcionalidad de deslizar hacia adelante y hacia atrás en Safari?
0
Copie y pegue este 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; } } } );Si lo quieres minimizado, copia y pega esto:
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
¿Qué tal si evitamos la acción predeterminada del evento de deslizamiento? En algún lugar de su documento. listo para agregar (tenga en cuenta que he incluido el documento. listo en este ejemplo, solo se necesita agregar la función):
$(document).ready(function(){ $(window).on('touchmove',function(e){e.preventDefault();}); });
En este caso, creo que el evento se llama 'touchmove', es posible que deba extenderlo para ignorar también el comportamiento predeterminado de touchstart/touchend, pero no estoy 100% seguro.